Toggle Group

Stable

A set of two-state buttons that can be toggled on or off.

Examples

Single Selection

tsx
<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left"><AlignLeft className="h-4 w-4" /></ToggleGroupItem>
  <ToggleGroupItem value="center"><AlignCenter className="h-4 w-4" /></ToggleGroupItem>
  <ToggleGroupItem value="right"><AlignRight className="h-4 w-4" /></ToggleGroupItem>
</ToggleGroup>

Multiple Selection

tsx
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Outline Variant

tsx
<ToggleGroup variant="outline" type="single" defaultValue="a">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

API Reference

PropertyDescriptionTypeDefault
typeDetermines if single or multiple items can be selected."single" | "multiple"-
variantVisual style for the toggle group."default" | "outline"-
sizeSize of the toggle items."sm" | "md" | "lg"-