Playground

ToggleGroup

control

Group of mutually exclusive toggles (single or multiple selection)

View switchers, alignment toggles, filter chips

import { ToggleGroup } from "@everydayos/ui";

Usage

One option at a time (type="single")

<ToggleGroup type="single" defaultValue="left">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeftIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenterIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRightIcon />
  </ToggleGroupItem>
</ToggleGroup>

API

Prop	Type	Default
`className`	`unknown`	—
`variant`	`unknown`	—
`size`	`unknown`	—
`children`	`unknown`	—

Examples

Multiple Selection

Multiple options (type="multiple")

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">U</ToggleGroupItem>
</ToggleGroup>

Composition

Pairs well with

Toggle

Stack

Heading

When to avoid

Need dropdown — use Select instead
Single on/off — use Switch instead
Many options — use Select or Command

Patterns

View Switcher

ToggleGroup

ToggleGroupItem

Switch between view modes (list/grid, etc.)

<ToggleGroup type="single" defaultValue="list">
  <ToggleGroupItem value="list" aria-label="List view"><ListIcon /></ToggleGroupItem>
  <ToggleGroupItem value="grid" aria-label="Grid view"><GridIcon /></ToggleGroupItem>
</ToggleGroup>