# Radios

Uma escolha entre poucas opções que se excluem, todas à vista.

## Playground

```html
<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

```html
<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

Nenhuma escolhida

NormalAlta

Escolhida

NormalAlta

Erro

NormalAlta

Escolha uma prioridade

Desativada

Urgente (só tarefas)

## Bons e maus padrões

Faça assim

NormalAltaUrgente

Uma embaixo da outra, e nenhuma marcada de antemão quando a escolha importa.

Não faça

NormalAltaUrgente

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.