Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Switch: Reference

Everything you need to re-use the switch.

Requirements

This component fulfils the following requirements:

  1. The component clearly communicates what is it for.
  2. The component supports helper text.
  3. The component supports smart defaults.
  4. The component supports the following states: on, off, hover (Web only), focused, disabled, pressed and processing
  5. The transformation between ON and OFF states are enhanced by an animation.
  6. Toggling the switch (on <-> off) will execute the underlying action immediately.

Keyboard interactions

KeyAction
EnterOn keyboard focus, pressing Enter changes the state of the switch to “On” or “Off”.
SpacebarOn keyboard focus, pressing Spacebar changes the state of the switch to “On” or “Off”.

WAI-ARIA roles

Landmarks

  1. element: "button"
    role: "switch"

Screen reader

  1. name: “Label”
    role: switch
    state: aria-checked=“true”
    SR: “Label, on, switch"
  2. name: “Label”
    role: switch
    state: aria-checked=“false”
    SR: “Label, off, switch”