An on/off setting that takes effect immediately, with a loading state while it saves.
Switch is role="switch" on a button. Use it for settings that apply at once; use Checkbox inside forms that are submitted.
Installation
npx shadcn@latest add KezLahd/rime/switchAlso installs: base, spinner.
Usage
import { Switch } from "@/components/ui";
<Switch label="Email me when an invoice is paid" checked={on} onChange={setOn} />Examples
States
A request is in flight.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
| checkedRequired | boolean | ||
| onChangeRequired | (checked: boolean) => void | ||
| labelRequired | ReactNode | ||
| description | ReactNode | ||
| disabled | boolean | ||
| loading | boolean | The change is saving. Blocks input and shows a spinner in the thumb. | |
| id | string | ||
| labelPosition | "start" | "end" | "end" | Label on the left, switch pushed right: for settings rows. |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-flat | 5px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-gradient | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glow-md | tokens.css | … |
| --glow-sm | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-muted | tokens.css | … |
| --r-sm | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --shadow-specular | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
Accessibility
- aria-checked reflects state; loading sets aria-busy and blocks toggling.
Do and don't
Do
- Say what is on, not what pressing does: "Email notifications".
Don't
- Don't use a Switch inside a form that has a submit button.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open switch.md