Switch
@sushindustries/uiA checkbox that admits it: a real input with role=switch, and a track :checked drives.
Composing it
SwitchSwitchA checkbox that admits it: a real input with role=switch, and a track :checked drives.@sushindustries/ui · content is already a complete <label> wrapping the input and its text -
label is required for that reason, there is no bare unlabelled input to
reach for. Do not nest it inside a FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content; FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content renders its own
<label> around whatever it is given, and a SwitchSwitchA checkbox that admits it: a real input with role=switch, and a track :checked drives.@sushindustries/ui · content inside one gets
labelled twice.
Motion and reduced motion
The thumb's slide and the track's colour change are both CSS transitions,
and both are removed entirely under prefers-reduced-motion: reduce - the
checked state still changes instantly, just without the 180ms of travel.
When not to use it
For a choice that only takes effect once a form is submitted - agreeing to
terms, opting into a newsletter - use CheckboxCheckboxA native checkbox with its words attached, painted by accent-color rather than redrawn.@sushindustries/ui · content instead. role="switch"
tells assistive technology the change is immediate, the way a setting in an
app is; a checkbox in a form implies "mark this, then submit," which is a
different promise to make to someone using a screen reader.