Disabled Switch for React

The demo disables the Switch. That sets data-disabled, which fades it to half opacity and sets cursor-not-allowed, and the switch leaves the tab order. The prop is disabled.

Say it in text near the switch, such as a FieldDescription under its label. A disabled control can't take focus, so a tooltip on the switch itself won't open from the keyboard.

Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

It has no visible label, so the demo passes aria-label (Bluetooth). Change it to the setting the switch controls, or use a visible FieldLabel instead.

Put the Switch in a horizontal Field next to a FieldLabel. Clicking the label toggles the switch, and screen readers read the label with it. Give the Switch an id and set the same value as htmlFor on the FieldLabel.

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing. With Base UI, uncheckedValue sets what it submits when off.