ToggleGroup

Conjunto de Toggles: escolha única ou múltipla entre opções curtas.

Playground

Variante

Tamanho

Orientação

Espaçamento

<ToggleGroup multiple>
  <ToggleGroupItem value="bold" aria-label="Negrito"><Bold /></ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Itálico"><Italic /></ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Sublinhado"><Underline /></ToggleGroupItem>
</ToggleGroup>

Quando usar

✓Alinhamento, modo de visualização (grade/lista), filtros rápidos

Evite quando

Troca o conteúdo inteiro de uma área→ Tabs
Mais de ~5 opções→ Select

Variantes e props

variantpadrão: default

defaultoutline

sizepadrão: default

defaultsmlg

orientationpadrão: horizontal

horizontalvertical

spacing

0 = itens colados (grupo); >0 = separados

Estados

item pressedfocus-visibledisabled

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: group de botões com aria-pressed
Teclado: setas movem entre itens

Dê aria-label ao grupo

Código

Partes: ToggleGroup, ToggleGroupItem

import

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

Fonte: src/components/ui/toggle-group.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: Toggle, Tabs