aforemny / material-components-web-elm / Material.TextArea

Text areas allow users to input, edit, and select multiline text.

Table of Contents

Resources

Basic Usage

import Material.TextArea as TextArea

type Msg
    = ValueChanged String

main =
    TextArea.filled
        (TextArea.config
            |> TextArea.setLabel (Just "My text area")
            |> TextArea.setValue (Just "hello world")
            |> TextArea.setOnInput ValueChanged
            |> TextArea.setRows (Just 4)
            |> TextArea.setCols (Just 20)
        )

Configuration


type Config msg

Configuration of a text area

config : Config msg

Default configuration of a text area

Configuration Options

setOnInput : (String -> msg) -> Config msg -> Config msg

Specify a message when the user changes the value inside the text area

setOnChange : (String -> msg) -> Config msg -> Config msg

Specify a message when the user confirms a changed value inside the text area

setLabel : Maybe String -> Config msg -> Config msg

Specify a text area's label

setValue : Maybe String -> Config msg -> Config msg

Specify a text area's value

setPlaceholder : Maybe String -> Config msg -> Config msg

Specify a text area's placeholder

setRows : Maybe Basics.Int -> Config msg -> Config msg

Specify a text area's number of rows

setCols : Maybe Basics.Int -> Config msg -> Config msg

Specify a text area's number of columns

setDisabled : Basics.Bool -> Config msg -> Config msg

Specify a text area to be disabled

Disabled text areas cannot be interacted with and have no visual interaction effect.

setRequired : Basics.Bool -> Config msg -> Config msg

Specify a text area to be required

setValid : Basics.Bool -> Config msg -> Config msg

Specify a text area to be valid

setMinLength : Maybe Basics.Int -> Config msg -> Config msg

Specify a text area's minimum length

setMaxLength : Maybe Basics.Int -> Config msg -> Config msg

Specify a text area's maximum length

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Filled Text Area

TextArea.filled TextArea.config

filled : Config msg -> Html msg

Filled text area view function

Outlined Text Area

Text areas may have a visible outlined around them by using their outlined variant.

TextArea.outlined TextArea.config

outlined : Config msg -> Html msg

Outlined text area view function

Disabled Text Area

To disable a text area, set its setDisabled configuration option to True.

TextArea.filled
    (TextArea.config |> TextArea.setDisabled True)

Required Text Area

To mark a text area as required, set its setRequired configuration option to True.

TextArea.filled
    (TextArea.config |> TextArea.setRequired True)

Valid Text Area

To mark a text area as valid, set its setValid configuration option to True.

TextArea.filled (TextArea.config |> TextArea.setValid True)

Text Area with Character Counter

To have a text area display a character counter, specify its setMaxLength configuration option, and also add a HelperText.characterCounter as a child of HelperText.helperLine.

[ TextArea.filled
    (TextArea.config |> TextArea.setMaxLength (Just 18))
, HelperText.helperLine [] [ HelperText.characterCounter [] ]
]

Focus a Text Area

You may programatically focus a text area by assigning an id attribute to it and use Browser.Dom.focus.

TextArea.filled
    (TextArea.config
        |> TextArea.setAttributes
            [ Html.Attributes.id "my-text-area" ]
    )