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
• 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 exposing (helperText, helperTextConf)
import Material.TextField exposing (textField, textFieldConf)


main =
    Html.div
        [ textField { textFieldConf | label = "Your name" }
        , helperText helperTextConf "Please fill this"
        ]

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 persistent configuration field 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 maxLength configuration field, and also add a characterCounter as a child of helperLine.

[ textField
    { textFieldConfig
        | maxLength = Just 18
    }
, helperLine [] [ characterCounter [] ]
]