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

Table of Contents

• Resources
• Basic Usage
• Full Width Text Field
• Multiline Text Field
• Disabled Text Field
• Password Text Field
• Required Text Field
• Invalid Text Field
• Outlined 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
    exposing
        ( textField
        , textFieldConfig
        )


type Msg
    = ValueChanged String


main =
    textField
        { textFieldConfig
            | label = "My text field"
            , value = Just "hello world"
            , onInput = Just ValueChanged
        }

Full Width Text Field

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

textField { textFieldConfig | fullWidth = True }

Full width text fields do not support label and will ignore this configuration field. You may set placeholder or provide an extraneous label for a full width text field.

Full width text fields do not support outlined and will ignore this configuration field.

Disabled Text Field

To disable a text field set its disabled configuration field to True.

textField { textFieldConfig | disabled = True }

Password Text Field

To mark a text field as an input for entering a passwort, set its type_ configuration field to the String "password".

textField { textFieldConfig | type_ = "password" }

Note: Other input types besides password may or may not be supported.

Required Text Field

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

textField { textFieldConfig | required = True }

Invalid Text Field

To mark a text field as invalid, set its invalid configuration field to True.

textField { textFieldConfig | invalid = True }

Outlined Text Field

Text fields may have a visible outlined around them by setting their outlined configuration field to True.

textField { textFieldConfig | outlined = True }

Note that this does not have any effect for fullwidth text fields.

Text Field with Leading Icon

To have a text field display a leading icon, set its leadingIcon configuration field to a TextFieldIcon.

textField
    { textFieldConfig
        | leadingIcon = textFieldIcon iconConfig "wifi"
    }

Text Field with Trailing Icon

To have a text field display a trailing icon, set its trailingIcon configuration field to a TextFieldIcon.

textField
    { textFieldConfig
        | trailingIcon = textFieldIcon iconConfig "clear"
    }

Text Field with Character Counter

To have a text field 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 [] ]
]