aforemny / material-components-web-elm / Material.Checkbox

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

Table of Contents

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 =
Internal.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 =
Internal.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 : Basics.Bool -> Config msg -> Config msg

Specify whether a checkbox is disabled

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

setTouch : Basics.Bool -> Config msg -> Config msg

Specify whether touch support is enabled (enabled by default)

Touch support is an accessibility guideline that states that touch targets should be at least 48 x 48 pixels in size. Use this configuration option to disable increased touch target size.

Note: Checkboxes with touch support will be wrapped in a HTML div element to prevent potentially overlapping touch targets on adjacent elements.

setAttributes : List (Html.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)

Focus a Checkbox

You may programatically focus a checkbox by assigning an id attribute to it and use Browser.Dom.focus.

Checkbox.checkbox
    (Checkbox.config
        |> Checkbox.setAttributes
            [ Html.Attributes.id "my-checkbox" ]
    )

Touch Support

Touch support is enabled by default. To disable touch support set a checkbox' setTouch configuration option to False.

Checkbox.checkbox
    (Checkbox.config |> Checkbox.setTouch False)