Text fields allow users to input, edit, and select text.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Filled Text Field
• Outlined Text Field
• Full Width Text Field
• Multiline Text Field
• Disabled Text Field
• Password Text Field
• Required Text Field
• Valid Text Field
• Text Field with Leading Icon
• Text Field with Trailing Icon
• Text Field with Character Counter

Resources

• Demo: Text Fields
• Material Design Guidelines: Menus
• MDC Web: Menu
• Sass Mixins (MDC Web)

Basic Usage

import Material.TextField as TextField


type Msg
    = ValueChanged String


main =
    TextField.filled
        (TextField.config
            |> TextField.setLabel (Just "My text field")
            |> TextField.setValue (Just "hello world")
            |> TextField.setOnInput ValueChanged
        )

Configuration

Configuration Options

Filled Text Field

Filled Text Field

TextField.filled TextField.config

Outlined Text Field

Text fields may have a visible outlined around them by using their outlined variant.

TextField.outlined TextField.config

Note that setFullwidth does not have any effect on an outlined text field.

Full Width Text Field

To make a text field span all of its available width, set its setFullwidth configuration option to True.

TextField.filled
    (TextField.config |> TextField.setFullwidth True)

Full width text fields do not support a label and will ignore the setLabel configuration option. You may use setPlaceholder or provide an extraneous label for a full width text field.

Outlined text fields do not support setFullwidth and wll ignore this configuration option.

Disabled Text Field

To disable a text field, set its setDisabled configuration option to True.

TextField.filled
    (TextField.config |> TextField.setDisabled True)

Password Text Field

To mark a text field as an input for entering a passwort, use its setType configuration option to specify "password".

TextField.filled
    (TextField.config |> TextField.setType (Just "password"))

Other input types besides "password" may or may not be supported.

Required Text Field

To mark a text field as required, set its setRequired configuration option to True.

TextField.filled
    (TextField.config |> TextField.setRequired True)

Valid Text Field

To mark a text field as valid, set its setValid configuration option to True.

TextField.filled
    (TextField.config |> TextField.setValid True)

Text Field with Leading Icon

To have a text field display a leading icon, use its setLeadingIcon configuration option to specify a value of Icon.

TextField.filled
    (TextField.config
        |> TextField.setLeadingIcon
            (Just (TextField.icon [] "wifi"))
    )

Text Field with Trailing Icon

To have a text field display a trailing icon, use its setTrailingIcon configuration option to specify a value of Icon.

TextField.filled
    (TextField.config
        |> TextField.setTrailingIcon
            (Just (TextField.icon [] "clear"))
    )

Text Field with Character Counter

To have a text field display a character counter, specify its setMaxLength configuration option, and also add a HelperText.characterCounter as a child of HelperText.helperLine.

[ TextField.filled
    (TextField.config |> TextField.setMaxLength (Just 18))
, HelperText.helperLine [] [ HelperText.characterCounter [] ]
]