Formulários

Botão de opção

Radio button

Permite escolher uma única alternativa dentro de um grupo.

Como prefere receber? Por e-mail Por notificação

Exemplo didático · Experimente os controles acima

Quando usar

Escolher entre poucas opções que vale a pena ver ao mesmo tempo.

Cuidados e acessibilidade

Agrupe com fieldset e legend e use o mesmo name para as opções.

Partes e comportamento

Pergunta do grupo, opções nomeadas e uma escolha ativa.

Não confunda

Switch representa um estado ligado ou desligado; radio escolhe uma opção dentro de um grupo.

Exemplo de código

<fieldset>
  <legend>Como prefere receber?</legend>
  <label><input type="radio" name="canal" value="email"> E-mail</label>
  <label><input type="radio" name="canal" value="app"> No aplicativo</label>
</fieldset>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Botão de opção (Radio button) em português do Brasil. Permite escolher uma única alternativa dentro de um grupo. Contexto de uso: Escolher entre poucas opções que vale a pena ver ao mesmo tempo. Estrutura: Pergunta do grupo, opções nomeadas e uma escolha ativa. Referência técnica: <input type="radio">. Requisito: Agrupe com fieldset e legend e use o mesmo name para as opções. Considere também: Switch representa um estado ligado ou desligado; radio escolhe uma opção dentro de um grupo. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗