Toggle Group

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

radix-ui.com

Variants

Multiple Selection

<ToggleGroup type="multiple" className="flex">
  <ToggleGroupItem value="bold" aria-label="Bold">
    Bold
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic">
    Italic
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">
    Underline
  </ToggleGroupItem>
</ToggleGroup>

Single Selection

<ToggleGroup type="single" defaultValue="center" className="flex">
  <ToggleGroupItem value="left" aria-label="Align left">
    Left
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    Center
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    Right
  </ToggleGroupItem>
  <ToggleGroupItem value="justify" aria-label="Justify">
    Justify
  </ToggleGroupItem>
</ToggleGroup>

Disabled Item

<ToggleGroup type="multiple" className="flex">
  <ToggleGroupItem value="bold" aria-label="Bold">
    Bold
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic" disabled={true}>
    Italic
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">
    Underline
  </ToggleGroupItem>
</ToggleGroup>