Text areas allow users to input, edit, and select multiline text.
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 of a text area
config : Config msg
Default configuration of a text area
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
TextArea.filled TextArea.config
filled : Config msg -> Html msg
Filled text area view function
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
To disable a text area, set its setDisabled
configuration option to True
.
TextArea.filled
(TextArea.config |> TextArea.setDisabled True)
To mark a text area as required, set its setRequired
configuration option to
True
.
TextArea.filled
(TextArea.config |> TextArea.setRequired True)
To mark a text area as valid, set its setValid
configuration option to
True
.
TextArea.filled (TextArea.config |> TextArea.setValid True)
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 [] ]
]
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" ]
)