RadioGroup
Grupo de opções onde só uma pode ser escolhida. Navegação por setas, indicador de 16px na cor primária.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico
import { RadioGroup, RadioGroupItem } from "@t2-educacao/midas";Uso
<RadioGroup defaultValue="mensal" aria-label="Plano">
<div className="flex items-center gap-2">
<RadioGroupItem value="mensal" id="mensal" />
<Label htmlFor="mensal">Mensal</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="anual" id="anual" />
<Label htmlFor="anual">Anual</Label>
</div>
</RadioGroup>Props
RadioGroup
| Prop | Tipo | Descrição |
|---|---|---|
value / defaultValue | string | Valor controlado / inicial |
onValueChange | (value: string) => void | Chamado ao mudar |
orientation | "vertical" | "horizontal" | Direção das setas |
disabled / required / name | Estado e formulário |
RadioGroupItem
| Prop | Tipo | Descrição |
|---|---|---|
value | string | Valor da opção (obrigatório) |
disabled | boolean | Desabilita só esta opção |
Acessibilidade
- Setas movem entre as opções;
Tabsai do grupo. - Dê um nome ao grupo (
aria-labelou um título comaria-labelledby).
Não faça
Questionnaire
Questionário em etapas guiado por dados. Escolha única ou múltipla, resposta livre (outro), pular, atalhos de teclado (letras ou números), validação, perguntas condicionais, progresso em texto, barra ou fração, variante card, animação, e etapa e respostas controláveis (para salvar e retomar).
Select
Lista de opções fechada, com visual do Midas (Radix Select). Para poucas opções sem busca; tamanhos default e sm, grupos, separador e itens desabilitados.