Skip to content

Switch

What component has

Keyboard support

Keyboard support
KeyFunction
Space , EnterChanges state of the switch to checked or not checked.

Considerations for designers

  • Make sure to add a non-color visual cue, like on-screen text or icon inside the Switch.Value, to convey the state of the switch. This will ensure that the meaning is clear to all users, including those who may have difficulty distinguishing colors. Refer to Visual clue example.
  • If changing the state of a switch causes an instant change, it may violate a guideline called WCAG Success Criterion 3.2.2 On Input. To avoid this, either make sure the change doesn't automatically cause a change of context, or inform users about the behavior before they use the switch.

Considerations for developers

You can add an external label to the Switch, just make sure the label and Switch.Value are connected through id. Refer to the External label exmaple.

Other recommendations

Find more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.