Componentes
Toggle Group
betaEscolha entre opções sempre visíveis, com o estado no próprio controle. Se as opções são muitas, use Select.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/toggle-group
Playground
<ToggleGroup defaultValue={["centro"]}>
<ToggleGroupItem value="esquerda" aria-label="Alinhar à esquerda"><AlignLeft /></ToggleGroupItem>
<ToggleGroupItem value="centro" aria-label="Centralizar"><AlignCenterHorizontal /></ToggleGroupItem>
<ToggleGroupItem value="direita" aria-label="Alinhar à direita"><AlignRight /></ToggleGroupItem>
</ToggleGroup>Uso
Agrupa toggles que representam opções mutuamente exclusivas e sempre visíveis. Só uma pode estar pressionada por vez.
Seleção múltipla
`multiple` deixa mais de um item pressionado ao mesmo tempo. Use quando as opções não se excluem — como marcações de formatação.
Variantes
`outline` desenha a borda de todo o grupo como se fosse uma peça só, sem duplicar borda entre os itens.
Vertical
`orientation="vertical"` empilha os itens e ajusta o arredondamento para o topo e a base do grupo.
Sem espaçamento
`spacing={0}` cola os itens e vira uma peça segmentada, com borda compartilhada em vez de espaço entre botões.
Item desabilitado
Desabilite um item específico quando a opção existe mas não se aplica agora — sem remover o item do grupo.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
ToggleGroup
| Prop | Tipo | Padrão |
|---|---|---|
| size | "md" | "sm" | "lg" | null | — |
| spacing | number | 2 |
| variant | "default" | "outline" | null | — |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
ToggleGroupItem
| Prop | Tipo | Padrão |
|---|---|---|
| size | "md" | "sm" | "lg" | null | "md" |
| variant | "default" | "outline" | null | "default" |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css