Square Switch with Label for React

The Switch sets rounded-sm for the track and **:data-[slot=switch-thumb]:rounded for the thumb. The thumb is the part with data-slot="switch-thumb", so the selector reaches it on every library.

The Switch and a FieldLabel sit in a horizontal Field with w-fit. The Switch has an id, and the FieldLabel points at it with htmlFor.

The switch starts on through its default prop, which only sets the starting state; after that it keeps its own state. To control it, keep the on or off state in your own state and pass it back. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

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.