lion/docs/components/switch/reference.md

parts	title	eleventyNavigation
Switch Reference	Switch: Reference	key order parent title Switch: Reference 30 Switch Reference

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

Key	Action
Enter	On keyboard focus, pressing Enter changes the state of the switch to “On” or “Off”.
Spacebar	On 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”