Navigation Toggle Group

Toggle Group

A row of toggles: pick one, or pick any (Radix Toggle Group).

Preview

Pick one

Pick any

Usage

tsx

import { ToggleGroup, ToggleGroupItem } from "zostel-ui";

<ToggleGroup type="single" defaultValue="zostel" aria-label="Stay">
  <ToggleGroupItem value="zostel">Zostel</ToggleGroupItem>
  <ToggleGroupItem value="homes">Homes</ToggleGroupItem>
  <ToggleGroupItem value="plus">Plus</ToggleGroupItem>
</ToggleGroup>

Props

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	—	Pick one, or any.
`value / defaultValue`	`string \| string[]`	—	What is on.
`onValueChange`	`(value) => void`	—	Called when it changes.
`variant / size`	`as Toggle`	—	Applied to every item.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

type

Type: "single" | "multiple"

Default: —

Pick one, or any.

value / defaultValue

Type: string | string[]

Default: —

What is on.

onValueChange

Type: (value) => void

Default: —

Called when it changes.

variant / size

Type: as Toggle

Default: —

Applied to every item.

className

Type: string

Default: —

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