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

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”