Default Switch for React

One Switch with only an aria-label. It starts off and keeps its own state, so nothing else in the file runs.

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 (Airplane mode). Change it to the setting the switch controls, or use a visible FieldLabel instead.

Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.

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.

Tab moves focus to the switch. Space toggles it, and so does Enter.