Checkboxes allow the user to select one or more items from a set.
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
)
Internal.Config msg
Configuration of a checkbox
config : Config msg
Default configuration of a checkbox
setOnChange : msg -> Config msg -> Config msg
Specify a message when the user changes a checkbox
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 : Config msg -> Html msg
Checkbox view function
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
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
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)
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 is enabled by default. To disable touch support set a checkbox'
setTouch
configuration option to False
.
Checkbox.checkbox
(Checkbox.config |> Checkbox.setTouch False)