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

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.

Table of Contents

Resources

Basic Usage

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


type Config msg

Configuration of a helper text

config : Config msg

Default configuration of a helper text

Configuration Options

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

Helper Text

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.

Persistent Helper Text

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.

Helper Text with Character Counter

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