DIANA

Diseño Aplicaciones Navarra

Select

Lista desplegable nativa para seleccionar una opción de un conjunto predefinido de valores.

Estado: review

1. Control base (lg)

Mostrar HTML 
<div class="gn-select">
  <select id="select-base-lg" class="gn-select__control" aria-label="Seleccionar opción normal">
    <option value="" disabled selected hidden>Seleccionar</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</div>

2. Control base disabled (lg)

Mostrar HTML 
<div class="gn-select gn-select--disabled">
  <select id="select-disabled-lg" class="gn-select__control" disabled aria-label="Seleccionar opción deshabilitada">
    <option value="" disabled selected hidden>Seleccionar</option>
    <option value="1">Opción 1</option>
  </select>
</div>

3. Control base error (lg)

Mostrar HTML 
<div class="gn-select gn-select--error">
  <select id="select-error-lg" class="gn-select__control" aria-label="Seleccionar opción con error" aria-invalid="true">
    <option value="" disabled selected hidden>Seleccionar</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
  </select>
</div>

4. Control base small

Mostrar HTML 
<div class="gn-select gn-select--sm">
  <select id="select-sm" class="gn-select__control" aria-label="Seleccionar opción pequeña">
    <option value="" disabled selected hidden>Seleccionar</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
  </select>
</div>

5. Composición de campo (label + hint + error)

Selecciona el mes de referencia.

Error: Debes seleccionar una opción.

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="select-composed">
    Mes<span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span>
  </label>
  <span class="gn-field__hint" id="select-composed-hint">Selecciona el mes de referencia.</span>
  <div class="gn-select gn-select--error">
    <select id="select-composed" class="gn-select__control" aria-invalid="true" aria-describedby="select-composed-hint select-composed-error" required>
      <option value="" disabled selected hidden>Seleccionar</option>
      <option value="ene">Enero</option>
      <option value="feb">Febrero</option>
    </select>
  </div>
  <p class="gn-field__error" id="select-composed-error">
    <svg class="gn-field__error-icon" xmlns="http://www.w3.org/2000/svg" width="3" height="15" viewBox="0 0 3 15" fill="none" aria-hidden="true" focusable="false">
      <path d="M1.50193 14.8389C1.91494 14.8389 2.26787 14.6975 2.56071 14.4146C2.85356 14.1317 3 13.7916 3 13.3944C3 12.9972 2.85291 12.6577 2.55879 12.3761C2.26466 12.0944 1.91109 11.9536 1.49807 11.9536C1.08506 11.9536 0.732128 12.095 0.439286 12.3779C0.146443 12.6608 0 13.0009 0 13.3981C0 13.7953 0.147085 14.1348 0.441214 14.4164C0.735343 14.6981 1.08891 14.8389 1.50193 14.8389ZM3 9.89262V0H0V9.89262H3Z" fill="currentColor"/>
    </svg>
    <span class="gn-field__error-prefix">Error:</span>
    <span class="gn-field__error-text">Debes seleccionar una opción.</span>
  </p>
</div>