Toggle Group

A group of toggle buttons that supports single or multiple selection, ideal for layout view switching and toolbar options.

Preview

Single Selection

Multiple Selection

Usage

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

{/* Single selection */}
<ToggleGroup type="single" defaultValue="grid">
  <ToggleGroupItem value="grid" aria-label="Grid view">
    <Grid className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="list" aria-label="List view">
    <List className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="columns" aria-label="Columns view">
    <Columns className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

{/* Multiple selection */}
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">
    <Bold className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic">
    <Italic className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Props

type
Type: "single" | "multiple"
Default: —

Whether a single or multiple items can be pressed at a time.

value
Type: string | string[]
Default: —

The controlled value(s) of the pressed item(s).

defaultValue
Type: string | string[]
Default: —

The default value(s) of the pressed item(s).

onValueChange
Type: (value: string | string[]) => void
Default: —

Callback fired when the value changes.

variant
Type: "default" | "outline"
Default: "default"

Visual style variant of the toggle group items.

size
Type: "default" | "sm" | "lg"
Default: "default"

Size of the toggle group buttons.

disabled
Type: boolean
Default: false

When true, prevents interaction with all items.
Previous Toggle Next Zostel Logo