Select

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

Nesta página

Playground

Repetir

Opção vazia

Estado

Fundo

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.

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.