Radio group
Grupo de botões de rádio para uma escolha entre poucas opções, todas visíveis ao mesmo tempo. O grupo é uma única parada de tabulação; as setas movem e selecionam.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Dê um nome ao grupo com Fieldset e FieldsetLegend, e envolva cada Radio num Label.
import { RadioGroup, Radio, Fieldset, FieldsetLegend, Label } from "@camaleo/react";Anatomia
O RadioGroup guarda o valor. Cada Radio é um círculo com um ponto dentro, nomeado pelo Label em volta dele.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Menor latência para clientes no Brasil.
Mais perto da maioria dos serviços dos EUA.
Mantém os dados dentro da União Europeia.
Com descrições
Quando só o nome não ajuda a escolher, ponha uma linha embaixo de cada opção e ligue com aria-describedby.
R$ 99 por mês, cancele quando quiser.
Controlado
Clique numa opção. value e onValueChange deixam o resto da tela reagir, aqui o preço embaixo.
Obrigatório, com erro
Envie sem escolher. Sem um padrão seguro, marque o grupo como required e diga o que fazer no FieldError.
Cadastre um celular no seu perfil para usar esta opção.
Uma opção desativada
Desative só a opção que não pode ser usada e diga como liberá-la. As setas pulam essa opção.
Preferência de assento
Em linha
Duas ou três opções curtas podem ficar lado a lado. Rótulos maiores se leem mais rápido em coluna.
Somente leitura
Numa etapa de revisão, readOnly mostra a escolha e continua focável, ao contrário de disabled, que apaga o visual.
Em contexto
Um radio group faz uma pergunta por vez. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Finalizar compra
Total
R$ 467,80Aparência
Vale só para este dispositivo.
Cancelar assinatura
Você continua no Pro até 30/11/2026.
Boas práticas
Dá para marcar e desmarcar de novo.
Depois de escolhido não dá para desfazer, então um radio solto prende a pessoa.
Cada resposta cabe em exatamente uma opção.
Uma equipe de 10 cabe em duas opções, então a pessoa chuta.
Props
defaultValue.O Radio recebe um value obrigatório (o que o grupo informa quando ele é escolhido) e disabled. Os atributos nativos passam direto.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio grupo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O grupo inteiro é uma parada de tabulação, então um formulário longo continua rápido de percorrer.
- Dê um nome a todo grupo: um FieldsetLegend, ou aria-labelledby apontando para um título visível.
- A área de toque tem pelo menos 24 × 24 px (WCAG 2.5.8) em todos os estilos, e o texto do rótulo também é clicável.
- Dentro de um Field, o erro fica ligado ao grupo pelo aria-describedby.