Material.Checkbox

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

Resources
Basic Usage
Configuration
- Configuration Options
Checkbox
Checked Checkbox
Indeterminate Checkbox
Disabled Checkbox

Resources

Basic Usage

Note that checkboxes are usually used in conjunction with form fields. Refer to FormField for more information.

import Material.Checkbox as Checkbox


type Msg
    = Changed


main =
    Checkbox.checkbox
        (Checkbox.config
            |> Checkbox.setState (Just Checkbox.unchecked)
            |> Checkbox.setOnChange Changed
        )

Configuration

type alias Config msg =

Config msg

Configuration of a checkbox

config : Config msg

Default configuration of a checkbox

Configuration Options

setOnChange : msg -> Config msg -> Config msg

Specify a message when the user changes a checkbox

type alias State =

State

State of a checkbox

setState : Maybe State -> Config msg -> Config msg

Specify a checkbox' state

A checkbox may be in checked, unchecked or indeterminate state.

setDisabled : Bool -> Config msg -> Config msg

Specify whether a checkbox is disabled

Disabled checkboxes cannot be interacted with and have no visual interaction effect.

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Checkbox

checkbox : Config msg -> Html msg

Checkbox view function

Checked Checkbox

To set the state of a checkbox, use its setState configuration option.

Checkbox.checkbox
    (Checkbox.config
        |> Checkbox.setState (Just Checkbox.checked)
    )

checked : State

Checked state

unchecked : State

Unchecked state

Indeterminate Checkbox

To set the state of a checkbox, use its setState configuration option.

Checkbox.checkbox
    (Checkbox.config
        |> Checkbox.setState (Just Checkbox.indeterminate)
    )

indeterminate : State

Indeterminate state

Disabled Checkbox

To disable a checkbox, use its setDisabled configuration option. Disabled checkboxes cannot be interacted with and have no visual interaction effect.

Checkbox.checkbox
    (Checkbox.config |> Checkbox.setDisabled True)

aforemny/material-components-web-elm/3.0.1