ToggleGroup
Conjunto de toggles relacionados. Modo single (escolha única, como alinhamento) ou multiple (vários ligados, como negrito e itálico); encostados ou com espaçamento; horizontal ou vertical.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Escolha única
Múltipla escolha
Com espaçamento
Vertical
Direita para esquerda (RTL)
import { ToggleGroup, ToggleGroupItem } from "@t2-educacao/midas";Uso
<ToggleGroup type="single" variant="outline" aria-label="Alinhamento do texto">
<ToggleGroupItem value="esquerda" aria-label="Alinhar à esquerda"><TextAlignLeft /></ToggleGroupItem>
<ToggleGroupItem value="centro" aria-label="Centralizar"><TextAlignCenter /></ToggleGroupItem>
<ToggleGroupItem value="direita" aria-label="Alinhar à direita"><TextAlignRight /></ToggleGroupItem>
</ToggleGroup>Props
ToggleGroup
Aceita as props do ToggleGroup do Radix mais:
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
type | "single" | "multiple" | obrigatório | Escolha única ou múltipla |
value / defaultValue | string (single) ou string[] (multiple) | Valor controlado / inicial | |
onValueChange | (value) => void | Chamado ao mudar | |
variant | "ghost" | "outline" | "ghost" | Aplicado a todos os itens |
size | "sm" | "default" | "lg" | "default" | Aplicado a todos os itens |
spacing | number | 0 | Espaço entre itens em unidades de 4px. 0 deixa os itens encostados |
orientation | "horizontal" | "vertical" | "horizontal" | Direção e navegação por setas |
ToggleGroupItem
| Prop | Tipo | Descrição |
|---|---|---|
value | string | Identificador do item (obrigatório) |
disabled | boolean | Desabilita só este item |
Exemplos
Múltipla escolha
<ToggleGroup type="multiple" aria-label="Formatação">
<ToggleGroupItem value="negrito" aria-label="Negrito"><TextB /></ToggleGroupItem>
<ToggleGroupItem value="italico" aria-label="Itálico"><TextItalic /></ToggleGroupItem>
<ToggleGroupItem value="sublinhado" aria-label="Sublinhado"><TextUnderline /></ToggleGroupItem>
</ToggleGroup>Com espaçamento e texto
<ToggleGroup type="single" variant="outline" spacing={2} defaultValue="lista" aria-label="Visualização">
<ToggleGroupItem value="lista">Lista</ToggleGroupItem>
<ToggleGroupItem value="grade">Grade</ToggleGroupItem>
</ToggleGroup>Vertical
<ToggleGroup type="single" orientation="vertical" variant="outline" aria-label="Período">
<ToggleGroupItem value="dia">Dia</ToggleGroupItem>
<ToggleGroupItem value="semana">Semana</ToggleGroupItem>
<ToggleGroupItem value="mes">Mês</ToggleGroupItem>
</ToggleGroup>RTL
Com DirectionProvider dir="rtl" (veja RTL), a ordem visual, os cantos e as setas do teclado se invertem.
Acessibilidade
- Setas do teclado movem o foco entre os itens;
Espaço/Enterliga e desliga. - Dê um
aria-labelao grupo e a cada item que só tenha ícone.
Não faça
- Usar
type="single"para navegação entre páginas: use abas ou links. - Misturar
variantdiferentes dentro do mesmo grupo.
Toggle
Botão de dois estados (ligado/desligado), como negrito num editor ou favoritar. Variantes ghost e outline; tamanhos sm, default e lg.
Tooltip
Balão de informação que aparece ao passar o mouse ou focar um elemento. Aceita texto simples ou conteúdo de dados com título, itens (rótulo, valor e indicador em ponto ou linha) e rodapé de total.