ToggleGroup

Composition preview

Try ToggleGroup alongside its related selection components. These examples keep all actions local.

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

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

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

type: single or multiple; value/defaultValue; onValueChange; ToggleGroupItem

Usage & accessibility

Use an accessible group label. Use Tabs when options reveal associated panels.

Implementation contract

src/components/ui/toggle-group.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.