Switch

Toggle control, wrapping Radix Switch.

Switch wraps @radix-ui/react-switch: bg-primary when on, a sliding thumb on --dur-fast, works inside a plain <label>.

Installation

import { Switch } from "@iammikz/srui";

Usage

Airplane mode

Props

React.ComponentPropsWithoutRef<typeof RadixSwitch.Root> — checked, onCheckedChange, disabled, required, name, value, plus invalid?: boolean (destructive track + aria-invalid).

Examples

Form-like rows

Email notifications

Weekly digest

Disabled

Invalid

invalid paints the destructive track and sets aria-invalid.

Airplane mode

Accept terms

Accessibility

Radix renders a switch role with aria-checked; Space toggles; the wrapped-label pattern names it. Color is never the only signal — the thumb position changes too.