Material.Switch

Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

Resources
Basic Usage
Configuration
- Configuration Options
Switch
On Switch
Disabled Switch

Resources

Basic Usage

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

switch : Config msg -> Html msg

Switch view function

Configuration

type Config msg

Configuration of a switch

config : Config msg

Default configuration of a switch

Configuration Options

setOnChange : msg -> Config msg -> Config msg

Specify a message when the user changes a switch

setChecked : Bool -> Config msg -> Config msg

Specify whether a switch is checked

setDisabled : 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 (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

On Switch

To set the state of a switch to on, set its setChecked configuration option to True.

Switch.switch (Switch.config |> Switch.setChecked True)

Disabled Switch

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)

aforemny/material-components-web-elm/3.0.2