Botão de opção (radio button)

O círculo de seleção única: marcar um desmarca o outro do grupo.

Hard

O que é

Botão de opção é o elemento de interface que deixa a pessoa escolher uma única opção dentro de um grupo de alternativas que se excluem. Quando você marca uma, a anterior do mesmo grupo desmarca sozinha. Visualmente, é aquele círculo com um ponto no meio.

O uso clássico é em formulário e configuração com escolha única, como forma de pagamento, idioma padrão ou tamanho de produto. A pessoa vê todas as opções de uma vez e escolhe só uma entre elas.

O cuidado é o de sempre quando se trata de componente: rótulo claro, opção selecionada bem visível, ordem lógica e o grupo separado dos outros grupos. E não dá pra esquecer da acessibilidade, porque ele precisa funcionar com teclado e leitor de tela.

Em uma frase

Como a pessoa paga de uma forma só, vamos usar botão de opção pra pix, cartão e boleto, não checkbox.

A pergunta que ele responde

Quando uso aquele círculo de escolha única em vez do quadradinho que marca vários?

Quando usar

Ajuda quando há um conjunto pequeno de opções que se excluem e a pessoa precisa escolher só uma.

Como não usar

O cuidado é não usar botão de opção quando dá pra marcar mais de uma, porque aí o certo é checkbox, nem usá-lo pra lista longa demais, caso em que o melhor é um dropdown.

Na prática

Pense no checkout: os botões de opção deixam a pessoa escolher entre pix, cartão ou boleto, um de cada vez, já que ela vai pagar de uma forma só.

Não confunda com

Vale separar botão de opção de checkbox, porque eles parecem primos mas servem a coisas opostas. O botão de opção é de seleção única: dá pra marcar só uma do grupo, e marcar uma desmarca a outra. O checkbox permite marcar várias ao mesmo tempo. Se a escolha é uma só, é botão de opção; se pode ser mais de uma, é checkbox.

D

Em inglês

Radio Buttons

Pronúncia

ré-di-o bâ-tan

Também chamado de

radio button, botão de rádio, seleção única

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre radio buttons e checkboxes