Binary switch/toggle inputs.

ℹ️ Only use switch inputs for boolean options.

Switch input labels

Note that switch inputs are nested inside their associated <label>. This ensures that a user can select an option by clicking on the <input>, the nested label text, or the whitespace between them.

The ON/OFF text is hidden from assistive technology users (eg screen readers) via aria-hidden="true" since the state of the component is already communicated to the user via its checked state.

Grouping switch inputs

Organize a list of switch input options (or other options, eg checkboxes) into a Settings list.

A switch input may be focused using the Tab key, and pressing the Space key will toggle the switch. This component adheres to the switch role requirements.

A switch input allows a user to toggle a setting on or off, immediately affecting the user interface. Common use-cases include filtering interfaces and settings menus.

• ARIA: switch role
• Control input
• Setting list