Binary toggle with an animated thumb.
An accessible on/off switch (role="switch") with an eased thumb slide, a focus ring, an optional start or end label, and inline error / helper text. A native checkbox under the hood for keyboard and form semantics; light / dark / auto themes.
Add the package. An accessible on/off switch (role="switch") backed by a native checkbox.
pnpm add @roy-ui/uiimport { Switch } from '@roy-ui/ui';
// or just this component:
import { Switch } from '@roy-ui/ui/switch';A label and a thumb that slides on toggle. Put the label before the track with labelPosition, or surface an error string for inline validation.
The thumb eases across on toggle; labelPosition moves the label to the leading side; an error string recolours the track and adds a helper line.
Please choose an option
<Switch label="Email me product updates" defaultChecked />
<Switch label="Two-factor authentication" labelPosition="start" />
<Switch label="Accept marketing" error="Please choose an option" />Native input attributes (checked, defaultChecked, onChange, name, disabled…) spread onto the input; ref forwards to it.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label beside the track. |
labelPosition | 'start' | 'end' | 'end' | Which side the label sits on. |
helperText | ReactNode | — | Quiet line beneath; replaced by an error string. |
error | boolean | string | false | Error state. A string becomes the helper line; the track shakes once. |
size | 'sm' | 'md' | 'md' | Track size. |
theme | 'light' | 'dark' | 'auto' | 'auto' | Follow the system or force a side. |