Combobox
Type to filter, arrows to move, Enter to choose; the list’s height springs as it filters.
Features
- Type to filter, arrows to move, Enter to choose.
Use it for
- Long lists: languages, models, people.
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 { Combobox } from 'runets'
<Combobox label="Language" items={['Rust', 'TypeScript', 'Python']} />API
| Prop | Type | What it does |
|---|---|---|
items | string[] | Options. |
onValueChange | (v) => void | Called on choice. |
Accessibility
- Combobox semantics; an empty state is announced.
Source
The code is in src/kit/inputs.tsx in runets, MIT licensed.