# Select

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

## Playground

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

Do

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.

## Accesibilidad

-   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.
