aforemny / material-components-web-elm / Material.TextField

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

Table of Contents

Resources

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


type Config msg

Configuration of a text field

config : Config msg

Default configuration of a text field

Configuration Options

setOnInput : (String -> msg) -> Config msg -> Config msg

Specify a message when the user changes the value inside the text field

setOnBlur : msg -> Config msg -> Config msg

Specify a message when the user moves focus away from the text field

setOnChange : (String -> msg) -> Config msg -> Config msg

Specify a message when the user confirms a changed value inside the text field

setLabel : Maybe String -> Config msg -> Config msg

Specify a text field's label

setValue : Maybe String -> Config msg -> Config msg

Specify a text field's value

setPlaceholder : Maybe String -> Config msg -> Config msg

Specify a text field's placeholder

setDisabled : Basics.Bool -> Config msg -> Config msg

Specify a text field to be disabled

Disabled text fields cannot be interacted with and have no visual interaction effect.

setRequired : Basics.Bool -> Config msg -> Config msg

Specify a text field to be required

setValid : Basics.Bool -> Config msg -> Config msg

Specify a text field to be valid

setMinLength : Maybe Basics.Int -> Config msg -> Config msg

Specify a text field's minimum length

setMaxLength : Maybe Basics.Int -> Config msg -> Config msg

Specify a text field's maximum length

setPattern : Maybe String -> Config msg -> Config msg

Specify a text field's pattern

setType : Maybe String -> Config msg -> Config msg

Specify a text field's type

setMin : Maybe Basics.Int -> Config msg -> Config msg

Specify a text field's minimum value

setMax : Maybe Basics.Int -> Config msg -> Config msg

Specify a text field's maximum value

setStep : Maybe Basics.Int -> Config msg -> Config msg

Specify a text field's step value

setLeadingIcon : Maybe (Icon.Internal.Icon msg) -> Config msg -> Config msg

Specify a text field's leading icon

setTrailingIcon : Maybe (Icon.Internal.Icon msg) -> Config msg -> Config msg

Specify a text field's trailing icon

setPrefix : Maybe String -> Config msg -> Config msg

Specify a text field's prefix

setSuffix : Maybe String -> Config msg -> Config msg

Specify a text field's suffix

setEndAligned : Basics.Bool -> Config msg -> Config msg

Specify a text field's input to end-aligned

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Filled Text Field

Filled Text Field

TextField.filled TextField.config

filled : Config msg -> Html msg

Filled text field view function

Outlined Text Field

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

TextField.outlined TextField.config

outlined : Config msg -> Html msg

Outlined text field view function

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" ]
    )