Switch

A checkbox with role="switch", drawn as a φ : 1 track whose thumb slides across.

input[role=switch]CSS only

Examples

Switch

Public Allow comments

Anatomy

`label`	Optional but recommended. Lines track and text up in a row, as for a checkbox.
`> input[type=checkbox][role=switch]`	The native checkbox with `role="switch"`, no class. The track is φ : 1; the thumb is its `::after`.

API

Attribute	Values	Description
`role`	`switch`	Required. Swaps the checkbox box for the track and thumb, and makes screen readers announce on and off.
`checked`	boolean	Fills the track with the accent and slides the thumb to the end.

Accessibility

Name the setting, not the action: "Public", not "Make public". The switch announces on or off itself.
Use a switch for a setting that applies at once; for a choice that is submitted with a form, use a checkbox.
A disabled switch dims and its label turns muted. In right-to-left pages the thumb travels the other way.

Key	Effect
`Space`	Toggles the switch.