Filter keys
Raised keys, one down at a time, each with its count; a press squashes the key, and the result count rolls.
Features
- Raised toggle keys, one down at a time, each carrying its count.
- A press squashes the key on a playful spring; the count pops only on change, never on first paint.
- ResultCount says Showing N of M with a rolling N, announced as one sentence.
Use it for
- Filtering a list by kind.
- Tabs that carry counts.
On this site
- Research: the filterPick a kind of work; each key carries its count and squashes when pressed.
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'
API
| Prop | Type | What it does |
|---|---|---|
options | { id, label, count, palette? }[] | The keys. |
value / onChange | id | The key that is down. |
label | string | Names the group. |
ResultCount shown / total / noun | number, number, string | The sentence under the keys. |
Accessibility
- Keys are toggle buttons (aria-pressed) in a labelled group.
- The count change is read once, as a sentence.
Source
The code is in src/kit/filter-keys.tsx in runets, MIT licensed.