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

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

Table of Contents

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 : 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

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)

Focus a Switch

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" ]
    )