alexanderkiel / elm-mdc-alpha / Material.Checkbox

Checkboxes allow the user to select one or more items from a set.

This module implements CSS-only checkboxes without state.

Install

In your application install:

npm install "

Example

import Html
import Html.Attributes as Attr
import Material.Checkbox as Checkbox
import Material.FormField as FormField
import Material.Options as Options


FormField.view [ Options.onClick Toggle ]
    [ Checkbox.view
          [ Options.id "my-checkbox"
          , Checkbox.checked <| Just True
          ]
          []
    , Html.label
          [ Attr.for "my-checkbox" ]
          [ Html.text "My checkbox" ]
    ]

View

view : List (Property msg) -> List (Html msg) -> Html msg

Renders a checkbox without label. Childs are ignored.

Properties

checked : Maybe Basics.Bool -> Property msg

Indicates whether a checkbox is checked.

`Nothing` puts a checkbox in an indeterminate state which is not checked
but visualized with a flat bar. The indeterminate state should be used on
parent checkboxes where not all child checkboxes are checked.

disabled : Basics.Bool -> Property msg

Indicates whether the user can interact with a checkbox.