Small Switch for React

It sets size="sm", the built-in small size. The default size is default. Both sizes keep the thumb in proportion with the track.

size sets data-size on the Switch, and the track and thumb sizes for each value are classes in the Switch file in your ui folder. Edit them there, or add another size, rather than overriding the height and width on one switch.

The track is small, but the Switch adds an invisible hit area around it with an after: pseudo-element, so the target is larger than what you see. Prefer the default size on touch-first screens.

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

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