Segmented control
A pill that slides to the chosen segment, its width leading its position.
Features
- A pill that slides to the chosen segment, its width leading its position.
Use it for
- View switches.
- Small filters.
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 motion - 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 { SegmentedControl } from 'runets'
<SegmentedControl label="View" value={v} onValueChange={setV} options={[['list', 'List'], ['grid', 'Grid']]} />API
| Prop | Type | What it does |
|---|---|---|
value | string | Chosen segment. |
onValueChange | (v) => void | Called on change. |
options | [id, label][] | Segments. |
Accessibility
- role radiogroup; arrow keys move and focus the choice.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.