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

Table of Contents

• Resources
• Basic Usage
• Checkbox
• Checked Checkbox
• Indeterminate Checkbox
• Disabled Checkbox

Resources

• Demo: Checkboxes
• Material Design Guidelines: Selection Controls – Checkbox
• MDC Web: Checkbox
• Sass Mixins (MDC Web)

Basic Usage

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

import Material.Checkbox as Checkbox
    exposing
        ( checkbox
        , checkboxConfig
        )


type Msg
    = CheckboxClicked


main =
    checkbox
        { checkboxConfig
            | state = Checkbox.Unchecked
            , onClick = Just CheckboxClicked
        }

Checkbox

Checked Checkbox

To set the state of a checkbox to checked, set its state configuration field to Checked. To set its state to unchecked, use Unchecked.

checkbox { checkboxConfig | state = Checkbox.Checked }

Indeterminate Checkbox

To set the state of a checkbox to indeterminate, set its state configuration field to Indeterminate.

checkbox
    { checkboxConfig | state = Checkbox.Indeterminate }

Disabled Checkbox

To disable a checkbox, set its disabled configuration field to True. Disabled checkboxes cannot be interacted with and have no visual interaction effect.

checkbox { checkboxConfig | disabled = True }