Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Switch: Reference

Everything you need to re-use the switch.


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

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


  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”