# Select

Uma lista que abre para escolher uma opção entre muitas.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-s">Repetir</label><span class="feitio-select"><select id="pg-s"><option>Diário</option><option selected>Semanal</option><option>Mensal</option></select><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg></span></div>
```

## Quando usar

-   Para uma escolha entre muitas opções (mais de seis ou sete) que a pessoa já conhece: um fuso horário, um país.

## Quando não usar

-   **Poucas opções:** Radios; todas ficam à vista.
-   **Várias escolhas:** Checkbox.
-   **Para navegar:** Nav ou links.

## Exemplos

### Fuso horário

No Chrome e no Edge, a lista abre dentro da página, como papel sobreposto: aparece no compartilhamento de tela e segue o tema. Nos outros, abre a lista do sistema, que funciona igual.

Mostrar código

```html
<span class="feitio-select">
  <select id="fuso">
    <option value="">Escolha um fuso horário</option>
    <option>São Paulo (UTC−3)</option>
    …
  </select>
  <svg class="feitio-icon" aria-hidden="true">…</svg>
</span>
```

## Estados

Sem escolha

Escolhido

Erro

Escolha um fuso horário

Desativado

Sem escolha: quando não existe uma opção que sirva de padrão, a primeira linha convida, no texto suave, e não pode ser enviada. Quando existe um padrão sensato, ele já vem escolhido.

## Bons e maus padrões

Faça assim

Muitas opções conhecidas: a lista economiza espaço.

Não faça

Três opções escondidas numa lista: com Radios, caberiam na tela e levariam um toque.

## Acessibilidade

-   Continua sendo um `<select>`: teclado, leitor de tela e mobile funcionam como em qualquer site.

## Atributos

Atributo

Valores

Para quê

`class="feitio-select"`

no `<span>` em volta

A moldura e a seta desenhada.

`option value=""`

a primeira opção

O estado "sem escolha"; não pode ser enviada.

`aria-invalid="true"`

com erro

O traço em vinho.
