Select

Una lista que abre para elegir una opción entre muchas.

En esta página

Playground

Repetir

Opción vacía

Estado

Fondo

HTML

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

Cuándo usarlo

Para una elección entre muchas opciones (más de seis o siete) la persona ya sabe: una zona horaria, un país.

Cuándo no usarlo

Pocas opciones: Radios; todos permanecen en vista.
Varias opciones: Checkbox.
Para navegar: Navegación o enlaces.

Ejemplos

Time zone

En Chrome y Edge, la lista se abre dentro de la página, como papel levantado: aparece en compartir pantalla y sigue el tema. En otro lugar, la lista del sistema se abre, 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

No choice

Elegida

Error

Pick a time zone

Deshabilitado

No choice: cuando no hay opción que haga un sensible por defecto, la primera línea invita, en texto suave, y no puede enviarse. Cuando existe un sensible por defecto, viene elegido.

Hacer y no hacer

Muchas opciones conocidas: la lista ahorra espacio.

Don’t

Tres opciones ocultas en una lista: con Radios, cabrían en pantalla y tomarían un toque.

Sigue siendo un <select>: el teclado, los lectores de pantalla y el móvil funcionan como en cualquier lugar.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-select"`	sobre el envoltorio `<span>`	El marco y la flecha dibujada.
`option value=""`	la primera opción	El estado "sin elección"; no puede enviarse.
`aria-invalid="true"`	con un error	La línea de vino.