Forms & Inputs
Switch
Controlled on/off toggle with sizes and color variants.
A controlled on/off toggle. It's controlled-only: pass checked and onCheckedChange. Supports two sizes (sm, md) and four color variants for the checked state.
Import
tsx
1import { Switch } from "@yuhuanowo/yunui";Usage
Switch is controlled — wire it to state:
tsx
1const [on, setOn] = useState(false);2<Switch checked={on} onCheckedChange={setOn} />Sizes & variants
Sizes (sm, md) and variants (default, success, warning, danger)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked* | boolean | — | Whether the switch is on (controlled). |
| className | string | — | |
| disabled | boolean | false | Disable interaction and dim the control. |
| id | string | — | Element id (e.g. to pair with a `<label htmlFor>`). |
| label | string | — | Accessible name. A `role="switch"` with no name is announced as an unlabelled control, and this one has no text of its own — so either pass this or pair the switch with a `<Label htmlFor>` via `id`. |
| onCheckedChange* | (checked: boolean) => void | — | Called with the next checked state when toggled. |
| size | "sm" | "md" | sm | Size: `sm` (default) or `md`. |
| variant | "default" | "success" | "warning" | "danger" | default | Checked-state color: `default`, `success`, `warning`, or `danger`. |