Switch
Compact and standard. The knob travels on a snappy spring; the track fills with the accent.
Features
- Compact and standard sizes.
- The knob widens while pressed and travels on the snap spring.
Use it for
- Settings that apply at once.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Switch } from 'runets'
<Switch label="Sync" checked={on} onCheckedChange={setOn} size="compact" />API
| Prop | Type | What it does |
|---|---|---|
checked | boolean | On or off. |
onCheckedChange | (v) => void | Called on toggle. |
size | 'compact' | 'standard' | Size. |
label | string | Visible label. |
Accessibility
- role switch with aria-checked; Space toggles.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.