Toggle Group
A connected set of toggle buttons for a single choice, such as view density.
Install
pnpm dlx shadcn@latest add @namche/toggle-groupUsage
import { LayoutGridIcon, ListIcon } from 'lucide-react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
<ToggleGroup defaultValue={['grid']} variant="outline" aria-label="Cluster view density">
<ToggleGroupItem value="grid" aria-label="Grid view">
<LayoutGridIcon />
</ToggleGroupItem>
<ToggleGroupItem value="list" aria-label="List view">
<ListIcon />
</ToggleGroupItem>
</ToggleGroup>ToggleGroup's pressed state is an array — value/defaultValue take
string[], not a single string. It defaults to single-select (multiple
defaults to false, so selecting one item unpresses the others); pass
multiple to allow several items pressed at once. variant and size set
on the group cascade to every ToggleGroupItem via context, overriding
whatever the item sets locally.