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
• Configuration
  • Configuration Options
• Basic Usage
• Helper Text
• Persistent Helper Text
• Helper Text with Character Counter

Resources

• Demo: Text fields
• Material Design Guidelines: Text Fields Layout
• MDC Web: Text Field Helper Text
• Sass Mixins (MDC Web)

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

Configuration Options

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.

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 [] ]
]