aforemny/material-components-web-elm/6.0.0

NOTE: the latest version is 9.1.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.

What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/

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

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 ]

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