Skip to content
Beta

Switch

Form control

A native checkbox that turns one setting on or off as soon as it changes.

States

Off, on and disabled

Off
On
Disabled, off
Disabled, on

With a label

Clicking the label toggles the switch

Usage

Put beta-switch on an input type="checkbox". The helper adds role="switch", the track and the thumb. Keep the name, value, analytics intent and change handling on the input.

Space toggles. Keyboard focus rings the track. The hit area is 44px. The input needs a name from a label, aria-label or aria-labelledby.

Source Components/Beta/Switch/