Radio Button

Os Radio Buttons disponibilizam a pessoa usuária de 2 a 7 opções predefinidas para seleção. Permitem que ela selecione apenas uma opção por vez.

Anatomia

São formados por:

1. Ícone

É alternado de acordo com o estado.

2. Label

Descreve a opção.

Ambos formam um grupo que chamamos de “opção” e são clicáveis.

O comportamento esperado com o clique é alterar o ícone para marcado/desmarcado. Caso exista uma opção marcada e a pessoa usuária clique em outra, a primeira deve ser desmarcada e a última marcada.

Aplicação

Esse componente possui três variações de estados. São eles:

<div class="field">
  <p class="control">
    <input class="checkradio" id="option1-1" type="radio" name="example1">
    <label for="option1-1">Não selecionado</label>

    <input class="checkradio" id="option1-2" type="radio" name="example1" checked="checked">
    <label for="option1-2">Selecionado</label>

    <input class="checkradio" id="option1-3" type="radio" name="example1" disabled>
    <label for="option1-3">Desabilitado</label>
  </p>
</div>

Como em checkbox, dê preferência na aplicação vertical. O componente é habilitado para percorrer a largura máxima permitida da grid que são 8 colunas. Porém, pode-se aplicar horizontalmente com limite de 2 radios alinhados lado a lado. Veja os exemplos:

<h3 class="title">Forma de pagamento</h3>
<p>Selecione a forma de pagamento</p>

<div class="field">
  <p class="control">
    <input class="checkradio" id="option2-1" type="radio" name="example2" checked="checked">
    <label for="option2-1">Boleto bancário</label>

    <input class="checkradio" id="option2-2" type="radio" name="example2">
    <label for="option2-2">Cartão de crédito</label>

    <input class="checkradio" id="option2-3" type="radio" name="example2">
    <label for="option2-3">Cartão de débito</label>
  </p>
</div>

<h3 class="title">Texto personalizável</h3>
<p>Sua mensagem tem um texto personalizável (com variável)?</p>

<div class="field">
  <p class="control">
    <input class="checkradio is-horizontal" id="option3-1" type="radio" name="example3" checked="checked">
    <label for="option3-1">Sim</label>

    <input class="checkradio is-horizontal" id="option3-2" type="radio" name="example3">
    <label for="option3-2">Não</label>
  </p>
</div>

Os radio buttons devem preferencialmente vir com uma opção selecionada. Se houver fatores como segurança e proteção da pessoa usuária envolvidos, escolha a favor dela. Se não for o caso, escolha a opção mais conveniente ou mais provável.

A única exceção para os radios buttons não conterem uma opção padrão é quando isso pode causar danos à pessoa usuária ou quando a ação é importante ou crítica para o sistema.

As opções devem ser ordenadas de forma lógica. Duas sugestões são priorizar as opções mais prováveis ou ordenar da opção mais simples para a mais complexa. Recomendamos que não sejam colocadas em ordem alfabética porque dependerá do idioma e não será de fácil manutenção em casos de traduções.

Boas Práticas

• Se for necessário um estado não selecionado, adicione a opção “Nenhum”;
• Se a lista não abranger todas as possibilidades, insira uma opção “Outro” (podendo ou não ser seguida por um campo de input para especificação);
• Se houver mais de 7 opções, considere a possibilidade de usar um textfield dropdown;
• Caso haja necessidade de múltipla escolha, utilize checkboxes ou tag inputs.