Text fields allow users to input, edit, and select text.
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 of a text field
config : Config msg
Default configuration of a text field
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
TextField.filled TextField.config
filled : Config msg -> Html msg
Filled text field view function
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
To disable a text field, set its setDisabled
configuration option to True
.
TextField.filled
(TextField.config |> TextField.setDisabled True)
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.
To mark a text field as required, set its setRequired
configuration option to
True
.
TextField.filled
(TextField.config |> TextField.setRequired True)
To mark a text field as valid, set its setValid
configuration option to
True
.
TextField.filled
(TextField.config |> TextField.setValid True)
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"))
)
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"))
)
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.
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 "$")
)
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")
)
To have a text field end align its input, set its setEndAligned
configuration
option to True
.
TextField.filled
(TextField.config
|> TextField.setEndAligned True
)
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 [] ]
]
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" ]
)