FormField aligns a form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a ripple effect upon interacting with the label.
import Material.Checkbox as Checkbox
import Material.FormField as FormField
main =
FormField.formField
(FormField.config
|> FormField.setLabel (Just "My checkbox")
)
[ Checkbox.checkbox Checkbox.config ]
Configuration of a form field
config : Config msg
Default configuration of a form field
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user clicks on the label
setLabel : Maybe String -> Config msg -> Config msg
Specify a form field's label
setAlignEnd : Basics.Bool -> Config msg -> Config msg
Specify whether the form field's label is positioned after its control
This is usefile for, say, checkboxes.
setFor : Maybe String -> Config msg -> Config msg
Specify a form field label's HTML5 for attribute
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
formField : Config msg -> List (Html msg) -> Html msg
Form field view function
If you want to position the label after the form field's control, set its
setAlignEnd
configuration option to True
.
FormField.formField
(FormField.config |> FormField.setAlignEnd True)
[ Checkbox.checkbox Checkbox.config ]
You may programatically focus a formfield by assigning an id attribute to it
and use Browser.Dom.focus
.
FormField.formField
(FormField.config
|> FormField.setAttributes [ Html.Attributes.id "my-form-field" ]
)
[]