Toggle Group

Formulario

Grupo de botões de dois estados, seleção única ou múltipla, com variante que reproduz o segmented control.

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { ToggleGroup } from "@trdr/ui/toggle-group"

Uso

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

export function Exemplo() {
  return <ToggleGroup />
}

Variantes

Grupo	Valores	Padrão
size	`defaultlg`	default

Props

ToggleGroupItemPropsestende React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>

Prop	Tipo	Descrição
variant?	ToggleGroupVariant
size?	ToggleGroupSize

Quando usar

Use toggle-group quando varios Toggle precisam compartilhar a mesma selecao coordenada: formatacao de texto onde negrito e italico podem estar ativos ao mesmo tempo (type="multiple"), ou alternar entre visualizacoes mutuamente exclusivas como grafico e livro de ofertas (type="single"). A variante segment reproduz o SegmentedControl do Hub legado (SegmentedControl.tsx) para quando o visual de pill, e nao de botao de toolbar, e o esperado.

Quando nao usar

Nao use toggle-group para selecao unica dentro de um formulario que so aplica ao confirmar: nesse caso use RadioGroup, que tem semantica de radio/radiogroup, nao de toolbar. Nao use a variante segment esperando a cor de marca no item ativo: por decisao deliberada de 2026-05, o segmented control usa bg-secondary (action/secondary), nao ciano.

Anatomia

ToggleGroup (data-slot="toggle-group"): a raiz, define type (single ou multiple), variant e size para todo o grupo.
ToggleGroupItem (data-slot="toggle-group-item"): cada botao do grupo. Reusa o toggleVariants do componente Toggle para as variantes default e outline, entao os dois componentes sempre envelhecem juntos. Pode sobrescrever variant/size individualmente, mas o uso normal e definir uma vez no Root e deixar o Context propagar.

Variantes

variant: default e outline vem direto do Toggle. segment e o visual do segmented control legado: pill com bg-surface-secondary inativo e bg-secondary no item selecionado.
size: default (h-6) e lg (h-8), a mesma escala do Toggle e do Button.

Acessibilidade

type="single" da ao grupo role="radiogroup" e a cada item role="radio" com aria-checked; type="multiple" da role="toolbar" e cada item usa aria-pressed, igual ao Toggle isolado. Em ambos os casos o Radix implementa foco em roda (roving tabindex): Tab entra no item ativo do grupo, Seta move entre os itens (pulando os desabilitados), e Espaco/Enter selecionam. Todo ToggleGroup sem rotulo visivel de grupo precisa de aria-label, e cada ToggleGroupItem que so mostra icone precisa do seu proprio aria-label.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="toggle-group"][data-slot="toggle-group-item"]

6 tokens usados

bg-secondaryoutline-nonering-offset-2ring-offset-backgroundring-ringtext-b3