Escolha única ou múltipla no formulário: radio e checkbox

Use radio quando a pergunta pede uma escolha entre alternativas do mesmo grupo. Use checkbox quando cada opção pode ser marcada ou desmarcada de forma independente. A decisão começa pela informação necessária: um material principal e uma lista de assuntos de interesse são respostas diferentes.

No caminho entre oferta, formulário e retorno, o controle precisa permitir a resposta que o texto solicita. Este guia mostra como combinar instrução e comportamento, com uma demonstração própria para testar na página e um roteiro de conferência.

Defina a resposta antes de escolher o controle

Escreva a pergunta completa e imagine uma resposta válida. Se a entrega exige escolher um material principal, permitir várias marcações deixa a prioridade sem definição. Se a equipe quer conhecer todos os assuntos pertinentes, obrigar uma única escolha pode omitir informações relevantes.

A referência da MDN para radio explica que os controles de um grupo compartilham o mesmo name e permitem uma seleção por vez. A documentação de checkbox descreve escolhas independentes que podem coexistir. O desenho visual precisa acompanhar essa função.

Uma caixa deixada em branco não explica, sozinha, a intenção da pessoa. Ela pode não ter marcado, não ter percebido o item ou não querer responder. Se o processo depende de distinguir situações, escreva alternativas e regras que permitam registrá-las, sem inventar uma resposta a partir da ausência.

Teste a diferença nesta demonstração

Exemplo fictício F046: o primeiro grupo pede um material principal entre guia, checklist e vídeo. O segundo permite combinar organização, atendimento e medição. Essas opções foram criadas para o exercício e não anunciam entrega de materiais ou disponibilidade de serviços.

No primeiro grupo, marque Guia e depois Checklist. O estado esperado é apenas Checklist selecionado. No segundo, marque Organização e Atendimento; as duas opções devem continuar marcadas. Depois desmarque Organização: Atendimento deve permanecer. Esses passos comparam os estados de uma interação, sem contar pessoas ou medir preferência.

F046 · Confira o estado

A demonstração usa opções fictícias. Os estados descrevem uma interação, sem pedido, cadastro ou preferência medida.

Única · Primeiro marque Guia

No grupo Material principal, Guia fica selecionado.

Única · Depois marque Checklist

Checklist substitui Guia. O estado esperado é apenas Checklist selecionado.

Múltipla · Primeiro marque Organização

No grupo Assuntos para comparar, Organização fica marcada.

Múltipla · Depois marque Atendimento

Organização e Atendimento continuam marcados ao mesmo tempo.

Múltipla · Desmarque Organização

Atendimento permanece marcado. Cada caixa tem seu estado independente.

Descrição da figura

O mapa da demonstração própria F046 compara duas sequências. À esquerda, o grupo radio Material principal permite uma escolha por vez: marque Guia, depois Checklist; o estado final esperado é só Checklist selecionado. À direita, as caixas de Assuntos para comparar são independentes: marque Organização, depois Atendimento; as duas devem permanecer. Desmarque Organização e confira que Atendimento continua marcado. A comparação mostra mudança e estado final, e não três pessoas ou uma contagem de preferências. Opções fictícias, sem oferta, pedido ou cadastro. No celular, as sequências são recompostas em cartões HTML.

A sequência mostra por que a instrução não resolve uma configuração incompatível. Escrever “escolha uma” sobre caixas independentes ainda pode permitir várias marcações. Da mesma forma, pedir “marque todos” num grupo radio impede manter mais de uma opção selecionada.

Mantenha pergunta, grupo e opções identificáveis

O tutorial de agrupamento de controles do W3C orienta associar controles relacionados com fieldset e legend. A legenda identifica a pergunta do grupo; cada opção mantém seu próprio rótulo. Isso organiza a relação no código e na leitura visual.

No exercício, Material principal e Assuntos para comparar são as legendas. Guia, Checklist, Organização e os demais nomes são rótulos das opções. Para revisar a linguagem dos campos, veja o guia de rótulos, instruções e exemplos de formulário.

Confira também a associação entre rótulo e controle. A MDN explica que acionar um rótulo associado permite selecionar o radio correspondente, o que facilita o uso em telas pequenas. No exemplo, cada rótulo se relaciona ao identificador único da sua opção.

<fieldset>
  <legend>Material principal (escolha uma opção)</legend>
  <label for="material-guia">
    <input type="radio" id="material-guia"
           name="material" value="guia"> Guia
  </label>
  <label for="material-checklist">
    <input type="radio" id="material-checklist"
           name="material" value="checklist"> Checklist
  </label>
</fieldset>

O trecho é um modelo para leitura e adaptação. A demonstração usa identificadores próprios para evitar conflito com outros elementos da página. Um grupo radio precisa de um name coerente; opções com nomes de grupo diferentes podem continuar selecionadas ao mesmo tempo.

Confira pelo teclado e no celular

Comece pela página publicada, com a mesma versão que será usada pelo público. Percorra os controles pelo teclado, observe o foco e teste mudar uma escolha do grupo único. Depois, marque e desmarque opções independentes. Registre os estados realmente observados e os comandos usados no seu navegador.

No celular, confira se a pergunta continua visível, se os rótulos cabem sem corte e se é possível acionar a alternativa pelo texto associado. Um controle customizado pode precisar de uma avaliação própria. A demonstração deste artigo usa controles nativos, e sua conferência não equivale a certificar a acessibilidade de qualquer formulário.

Se o campo for obrigatório, documente essa regra separadamente e confira a validação da implementação. Não acrescente obrigatoriedade a todas as caixas para tentar exigir uma escolha qualquer: isso pode transformar a regra pretendida em exigência de marcar cada item. A demonstração não impõe preenchimento nem inclui envio.

Verifique o recebimento sem confundir com a marcação

Num formulário real, o estado visível é uma parte do teste. A equipe também precisa conferir como as escolhas chegam ao destino. A MDN explica que várias caixas com o mesmo name podem gerar vários valores para esse nome, e que o processamento precisa preservar todos. Uma integração que conserva somente o último valor pode perder uma seleção.

No HTML de checkbox, uma opção não marcada não é enviada como um par nome e valor daquele controle, conforme a documentação. O sistema pode implementar outro tratamento; confira o comportamento real antes de interpretar ausência como uma negativa explícita. Neste exercício, não há formulário de envio ou integração para avaliar.

Quando as escolhas alimentarem uma pesquisa, a análise exige outro cuidado: a mesma pessoa pode participar de várias categorias. O guia de base dos percentuais em respostas múltiplas aprofunda essa contagem. Escolher o controle, preservar os valores recebidos e interpretar os dados são etapas próprias.

Página, formulário e versão:
Pergunta e finalidade da informação:
Escolha única, múltipla ou condição independente:
Alternativas e significado da ausência:
Instrução visível e regra de obrigatoriedade:
Controle, name, identificadores e rótulos:
Estado inicial:
Troca de opção e estado observado:
Combinação e desmarcação observadas:
Teclado, celular e recursos de acesso conferidos:
Valores recebidos no destino do teste autorizado:
Limite, problema, responsável e nova conferência:

Perguntas frequentes sobre radio e checkbox

Qual é a diferença entre radio e checkbox?

No grupo radio, uma escolha substitui a anterior. Checkboxes permitem marcar e desmarcar opções independentes, inclusive manter várias selecionadas.

Escrever escolha uma basta para impedir várias marcações?

Não. A configuração do controle precisa corresponder à instrução. Confira a troca na versão publicada e o agrupamento técnico das alternativas.

Uma caixa em branco deve virar resposta não?

Não presuma essa equivalência. Defina o significado da ausência e confira como o formulário e a integração a registram. Uma negativa explícita pode exigir outra redação ou alternativas próprias.

A demonstração deste artigo envia uma solicitação?

Não. São controles didáticos sem formulário ou botão de envio. Marcar uma opção não solicita material, não cria cadastro e não representa preferência medida.

Se sua equipe precisa organizar perguntas, instruções e conferências do caminho de captação, converse conosco sobre a revisão do formulário. Podemos ajudar a definir a finalidade e os critérios. Implementação, integração e acompanhamento precisam de entregas e responsáveis definidos.