Helper text gives context about a field’s input, such as how the input will be used. It should be visible either persistently or only on focus.
import Material.HelperText as HelperText
import Material.TextField as TextField
main =
Html.div []
[ TextField.filled
(TextField.config
|> TextField.setLabel (Just "Your name")
)
, HelperText.helperText HelperText.config
"Please fill this"
]
Configuration of a helper text
config : Config msg
Default configuration of a helper text
setPersistent : Basics.Bool -> Config msg -> Config msg
Specify whether a helper text should be persistent
Persistent helper texts always display regardless of whether the input has focus or not.
setValidation : Basics.Bool -> Config msg -> Config msg
Specify whether the helper text contains a validation message
Validation messages are highlighted red if their input is invalid.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
The helper line is expected to be a direct sibling of the text field it belongs to and the helper text is expected to be a direct child of the helper text line.
helperText : Config msg -> String -> Html msg
Helper text view function
The helper text is expected to be a direct child of the helper line.
A text field's helper text may show unconditionally by setting its
setPersistent
configuration option to True
. By default a text field's
helper text only shows when the text field has focus.
To have a text field or text area display a character counter, set its
setMaxLength
configuration option, and also add a characterCounter
as a
child of helperLine
.
[ TextField.filled
(TextField.config |> TextField.setMaxLength (Just 18))
, HelperText.helperLine [] [ HelperText.characterCounter [] ]
]
helperLine : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Helper text line view function
The helper line is expected to be the wrapping element of the helper text. It is expected to be a direct sibling of the text field that it belongs to.
characterCounter : List (Html.Attribute msg) -> Html msg
Character counter view function