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 Custom Icon
• Text Field with Prefix
• Text Field with Suffix
• End Aligned Text Field
• Text Field with Character Counter
• Focus a Text Field

Resources

• Demo: Text Fields
• Material Design Guidelines: Text Fields
• MDC Web: Textfield
• 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 (TextFieldIcon.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 (TextFieldIcon.icon "clear"))
    )

Text Field with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.

See Material.TextField.Icon for more information.

Text Field with Prefix

To have a text field display a prefix text such as a currency symbol, set its setPrefix configuration option.

TextField.filled
    (TextField.config
        |> TextField.setPrefix (Just "$")
    )

Text Field with Suffix

To have a text field display a suffix text such as a unit of mass, set its setSuffix configuration option.

TextField.filled
    (TextField.config
        |> TextField.setSuffix (Just "kg")
    )

End Aligned Text Field

To have a text field end align its input, set its setEndAligned configuration option to True.

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

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

Focus a Text Field

You may programatically focus a text field by assigning an id attribute to it and use Browser.Dom.focus.

TextField.filled
    (TextField.config
        |> TextField.setAttributes
            [ Html.Attributes.id "my-text-field" ]
    )