Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Note that switches are usually used in conjunction with form fields.
import Material.Switch as Switch
type Msg
= Changed
main =
Switch.switch
(Switch.config
|> Switch.setChecked True
|> Switch.setOnChange Changed
)
switch : Config msg -> Html msg
Switch view function
Configuration of a switch
config : Config msg
Default configuration of a switch
setOnChange : msg -> Config msg -> Config msg
Specify a message when the user changes a switch
setChecked : Basics.Bool -> Config msg -> Config msg
Specify whether a switch is checked
setDisabled : Basics.Bool -> Config msg -> Config msg
Specify whether a switch is disabled
Disabled switches cannot be interacted with and have no visual interaction effect.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
To set the state of a switch to on, set its setChecked
configuration option
to True
.
Switch.switch (Switch.config |> Switch.setChecked True)
To disable a switch, set its setDisabled
configuration option to True
.
Disabled switches cannot be interacted with and have no visual interaction effect.
Switch.switch (Switch.config |> Switch.setDisabled True)
You may programatically focus a switch by assigning an id attribute to it and
use Browser.Dom.focus
.
Switch.switch
(Switch.config
|> Switch.setAttributes
[ Html.Attributes.id "my-switch" ]
)