Switch

Installation

npx @yolkui/cli add switch

Settings list

For a list of settings, put the label and a FieldDescription in a FieldContent and the switch after it in a horizontal Field: the text takes the start of the row and the switch sits at the end. Point the label at the switch with htmlFor and an id.

Controlled

Pass checked and onCheckedChange to hold the state yourself, when the page reacts to it at once. Without them the switch keeps its own state; defaultChecked sets where it starts.

Sizes

The default switch is 40×20, the height of a label's line. size="sm" is 32×16, for dense lists; it sits on the label's first line too.

Invalid

An invalid switch draws its ring in red while it is off. Red is never the only signal: pair it with a FieldError that says what to do.

Disabled

A disabled switch fades with its label and cannot be changed, and a form leaves it out. It stays focusable and keeps pointer events, so a Tooltip around the switch can say why, on hover and on keyboard focus. If the reason matters to everyone, write it in a FieldDescription instead.

Read-only

readOnly shows a value someone else controls. Unlike disabled, it stays at full strength and a form submits it; it cannot change, so it drops the pointer and the hover. Screen readers hear "read-only". Say who controls it in a FieldDescription.

Accessibility

Screen readers hear the label, "switch" and its state (on or off), and "dimmed" when disabled. Space toggles it.

• Use a switch for a setting that takes effect at once. When the choice is only applied on submit, a Checkbox says so better.
• Keep the label the same in both states: the switch already says on or off, so a label that changes ("Enabled" / "Disabled") is read twice.
• The track is 40×20; the area that takes a click is at least 24px high, and the whole label.