Pill Menu
A filter or a sort in a row of pills: the brand pill opens a menu, any of (Region) or one of (Sort). On while a filter holds anything.
Preview
1 region, sorted by recommended.
Usage
tsx
import { PillMenu } from "zostel-ui";
{/* a filter: pick any, the pill counts them */}
<PillMenu type="multiple" label="Region" options={regions} value={picked} onValueChange={setPicked} />
{/* a sort: pick one, the pill shows it */}
<PillMenu label="Sort" options={sorts} value={sort} onValueChange={setSort} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | What it filters or sorts by. The pill says it, with the count (a filter) or the pick (a sort). |
options | { value: string; label: string }[] | — | The choices, in menu order. |
type | "single" | "multiple" | "single" | single = one of (a sort); multiple = any of (a filter), with a Clear item. |
value · onValueChange | string · string[] | — | The pick (single) or the picks (multiple), and the change. |
className | string | — | More classes on the pill. |
labelType:
stringDefault: —
What it filters or sorts by. The pill says it, with the count (a filter) or the pick (a sort).
optionsType:
{ value: string; label: string }[]Default: —
The choices, in menu order.
typeType:
"single" | "multiple"Default:
"single"single = one of (a sort); multiple = any of (a filter), with a Clear item.
value · onValueChangeType:
string · string[]Default: —
The pick (single) or the picks (multiple), and the change.
classNameType:
stringDefault: —
More classes on the pill.
On zostel.com
The Zostel Homes list filters by Region and Price and sorts with a Sort pill, beside plain toggle pills (Pool, Parking). This is the brand pill with a Radix menu: the arrow keys move, Space ticks, the menu stays open while ticking several, and Escape gives the focus back to the pill.