Select
A list of options in a popover anchored to its trigger, grouped, with the chosen one checked.
Features
- Options grouped, the chosen one checked, in a popover anchored to the trigger.
Use it for
- Picking one of many.
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 { Select } from 'runets'
<Select label="Model" value={v} onValueChange={setV} options={[{ value: 'opus', label: 'Opus', group: 'Large' }]} />API
| Prop | Type | What it does |
|---|---|---|
options | Option[] | { value, label, group }. |
value | string | Chosen value. |
onValueChange | (v) => void | Called on change. |
Accessibility
- Listbox semantics; arrow keys, typeahead, Escape closes.
Source
The code is in src/kit/inputs.tsx in runets, MIT licensed.