Vox Mente
Navegação

Componentes

Radio Group

beta

Uma escolha entre poucas opções que precisam ficar todas visíveis. Se são muitas, ou se cabem escondidas, 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/radio-group

Playground
<RadioGroup defaultValue="leitura">
  <FieldLabel>
    <RadioGroupItem value="leitura" />
    Trilha de leitura
  </FieldLabel>
  <FieldLabel>
    <RadioGroupItem value="escrita" />
    Trilha de escrita
  </FieldLabel>
</RadioGroup>

Uso

Escolha única entre opções que precisam ficar todas visíveis ao mesmo tempo.

Radio group ou select

Radio group só quando as opções cabem visíveis de uma vez, sem rolagem — poucas, e todas comparáveis lado a lado. Passou de quatro ou cinco, ou o aluno não precisa comparar todas ao mesmo tempo, é Select.

Sem FieldLabel

Dá para usar `RadioGroupItem` solto, mas aí a área de clique é só o círculo. Prefira sempre envolver com `FieldLabel`.

Inválido

`aria-invalid` no item marcado destaca a opção problemática sem quebrar o layout do grupo.

Desabilitado

Desabilitado no grupo inteiro trava todas as opções; no item, só aquela opção some do fluxo.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

RadioGroup, RadioGroupItem não têm props próprias — aceitam apenas as props herdadas, 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