Radios
Uma escolha entre poucas opções que se excluem, todas à vista.
Nesta página
Playground
Disposição
Estado
Fundo
<fieldset class="feitio-fieldset"><legend class="feitio-label">Com que frequência?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Todo dia">Todo dia</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Toda semana" checked>Toda semana</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Todo mês">Todo mês</label></div></fieldset>Quando usar
- Para escolher exatamente uma entre duas e seis opções.
Quando não usar
- Muitas opções: Select.
- Várias escolhas: Checkbox.
- Duas ou três opções vizinhas que mudam a vista na hora (dia e noite, uma lista ou uma grade): SegmentedControl.
Exemplos
Com que frequência?
Uma embaixo da outra, num Fieldset com a pergunta.
Mostrar código
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Com que frequência?</legend>
<div class="feitio-choices">
<label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
…
</div>
</fieldset>Estados
Bons e maus padrões
Faça assim
Uma embaixo da outra, e nenhuma marcada de antemão quando a escolha importa.
Não faça
Opções coladas numa linha: fica difícil ver qual círculo é de qual texto.
Acessibilidade
- Sempre dentro de um Fieldset com título; as setas do teclado andam entre as opções.
- Lado a lado só com duas opções curtas, como "Sim" e "Não".
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-choices" | em volta | space-2 entre as opções. |
class="feitio-choice" | no <label> | Círculo e texto clicáveis juntos. |
name | o mesmo em todas | Uma escolha só por grupo. |
checked | — | Só quando há um padrão sensato. |