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
• Switch
• On Switch
• Disabled Switch

Resources

• Demo: Switches
• Material Design Guidelines: Selection Controls – Switches
• MDC Web: Switch
• Sass Mixins (MDC Web)

Basic Usage

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

import Material.Switch exposing (switch, switchConfig)


type Msg
    = SwitchClicked


main =
    switch
        { switchConfig
            | on = True
            , onClick = Just SwitchClicked
        }

Switch

On Switch

To set the state of a switch, set its on configuration field to a Bool value.

switch { switchConfig | on = True }

Disabled Switch

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

switch { switchConfig | disabled = True }