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
• Form Field
• Label Position

Resources

• Demo: Checkbox
• MDC Web: Form Field

Basic Usage

import Material.Checkbox
    exposing
        ( checkbox
        , checkboxConfig
        )
import Material.FormField
    exposing
        ( formField
        , formFieldConfig
        )


main =
    formField { formFieldConfig | label = "My checkbox" }
        [ checkbox checkboxConfig ]

Form Field

Label Position

If you want to position the label after the form field (ie. checkbox), set its alignEnd configuration field to True:

formField { label = "My checkbox", alignEnd = True } [ checkbox checkboxConfig ]