Radio group
One of a few, arrow keys move the choice.
Features
- One choice of a few; the dot pops in on the pop spring.
Use it for
- Exclusive options.
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 { RadioGroup } from 'runets'
<RadioGroup label="Digest" value={v} onValueChange={setV} options={[['daily', 'Daily'], ['weekly', 'Weekly']]} />API
| Prop | Type | What it does |
|---|---|---|
value | string | The chosen option. |
onValueChange | (v) => void | Called on change. |
options | [id, label][] | The options. |
Accessibility
- Arrow keys move the choice; one Tab stop.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.