Trips & places Filter Bar

Filter Bar

Filter pills — the brand’s one filter style: Warm Orange when on, white with a beige edge when off.

Preview

32 places: Banikhet, Bir, Billing, Chitkul, Dharamkot, Doodhpathri, Gadagushaini, Gangtok…

Usage

tsx

import { FilterBar } from "zostel-ui";

<FilterBar
  options={[
    { value: "valleys", label: "Valleys", count: 32 },
    { value: "waters", label: "Waters", count: 16 },
  ]}
  value={selected}
  onValueChange={setSelected}
/>

Props

Prop	Type	Default	Description
`options`	`{ value; label; count? }[]`	—	The pills.
`value`	`string[]`	—	What is on (several can be).
`defaultValue`	`string[]`	—	What is on at first, when value isn't controlled.
`onValueChange`	`(value: string[]) => void`	—	Called with what is on.
`label`	`string`	—	The row's accessible name.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

options

Type: { value; label; count? }[]

Default: —

The pills.

value

Type: string[]

Default: —

What is on (several can be).

defaultValue

Type: string[]

Default: —

What is on at first, when value isn't controlled.

onValueChange

Type: (value: string[]) => void

Default: —

Called with what is on.

label

Type: string

Default: —

The row's accessible name.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).