Pular para o conteúdo
Faculdade PhorteDesign System

Radio

Em andamento

Opção de escolha única dentro de um grupo: marcar uma desmarca as outras. Tem rótulo e uma linha de descrição opcional, fora do nome.

Função
Formulário e ação
Também chamado de
botão de opção, radio, escolha única
Mora em
app/components/atoms/Radio.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Marcado
  3. Desabilitado
  4. Com descrição
  5. Grupo
  6. Grupo com erro

Quando usar

Quando a pessoa escolhe **uma** entre poucas opções (até cinco ou seis) e vale a pena ver todas ao mesmo tempo.

Faça

  • Agrupe no RadioGroup (E59): ele monta o <fieldset> com <legend>, gera um name só e guarda a escolha (value ou defaultValue).
  • Deixe uma opção marcada quando houver um padrão razoável.
  • Use descricao para explicar a opção sem alongar o rótulo.

Evite

  • Uma opção sozinha: sem outra, não há como desmarcar. Para sim/não isolado, Checkbox.
  • Trocar a aparência sem redesenhar o foco: o appearance-none apaga o foco do navegador, e o anel de hoje é próprio.
  • Montar o grupo à mão com o mesmo name em grupos diferentes da página — viram um grupo só. O RadioGroup gera o nome.

Quando não usar. Para várias escolhas independentes, use o Checkbox. Para muitas opções, o Select. Para filtrar uma lista na hora, o FilterGroup.

Nota de uso

appearance-none apaga o foco que o navegador desenha, e por isso este componente ficou sem foco visível nenhum até a E08a. O anel de hoje é próprio. Se você trocar a aparência, redesenhe o foco junto. O rótulo é text-sm em caixa normal, como no Checkbox — era 10px em caixa alta, e é a própria resposta. descricao fica fora do nome e é ligada por aria-describedby. Agrupe com <fieldset> e <legend>.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Círculo — 20px, borda de 2px; marcado, a borda e o centro em `--primary`, com 3px de `--card` entre eles — um ponto de 10px desenhado no próprio controle (E121), sempre concêntrico em qualquer zoom.
  2. Rótulo — Texto `text-sm`; a linha inteira é o `<label>`.
  3. Descrição — Linha embaixo, alinhada ao texto do rótulo, ligada por `aria-describedby`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
DesmarcadoCírculo vazio, borda --border-interactive.
MarcadoBorda --primary e ponto central de 10px.
FocoAnel ring-ring de 2px, só no teclado.
Erroaria-invalid: borda vermelha.
DesabilitadoLinha do controle a 50% e cursor proibido; a descrição não esmaece.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Marcar uma opçãoDesmarca as outras do mesmo name — comportamento nativo.
Clique no textoMarca — o rótulo é o <label> do controle.

Relacionados