Select

# Componente Select

El componente Select provee una interfaz gráfica estandarizada al control <select> nativo de HTML5.

Reglas de Uso y Consideraciones

- Despliegue Nativo: Por orden de integración directiva, se ha renunciado al concepto de *Custom Dropdown*. El comportamiento y renderización visual de la lista de opciones (<option>) están completamente delegados al Sistema Operativo y al Motor Web del lado del cliente. - Accesibilidad: Se ha implementado ocultando la UI nativa mediante la técnica appearance: none. Los focus-rings se re-encaminan a pseudo-elementos del CSS para mantener consistencia con los inputs de texto, pero los lectores de pantalla reciben y anuncian un listbox 100% nativo. Las <label> con directiva for son obligatorias y acompañan estructuralmente al input en todos los .examples.html.

Variantes Disponibles (CSS)

1. .gn-select (base, caja grande y holgada). 2. .gn-select--sm (versión compactada, paddings inferiores y un height rebajado). 3. .gn-select--error (fuerza la directiva semántica y tiñe el contorno de #d82b0f). 4. Atributo disabled nativo. Absorbe el color gris de inactividad de las variables CSS correspondientes y muta el icono lateral en consecuencia.

<div class="gn-select">
  <label for="select-base" class="gn-select__label sr-only">Selecciona una opción</label>
  <div class="gn-select__wrapper">
    <select id="select-base" class="gn-select__control">
      <option value="" disabled selected hidden>Seleccionar</option>
      <option value="1">Option text 1</option>
      <option value="2">Option text 2</option>
      <option value="3">Option text 3</option>
    </select>
  </div>
</div>