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.

Resources
Basic Usage
Configuration
- Configuration Options
Form Field
Label Position

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 : 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 (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 ]

aforemny/material-components-web-elm/3.0.2