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

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.

Table of Contents

Resources

Basic Usage

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


type Config msg

Configuration of a form field

config : Config msg

Default configuration of a form field

Configuration Options

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

Form Field

formField : Config msg -> List (Html msg) -> Html msg

Form field view function

Label Position

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 ]

Focus a Form Field

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