Input

Campo de texto de línea única con etiqueta, texto de ayuda y soporte para estados de validación.

Estado: draftEtiquetas: form, input, textfield

Vista Previa

1. Input Default (Talla MD 400px)

2. Input Activo y Relleno

3. Input con Iconos y Contador de Caracteres

40 caracteres permitidos

4. Variantes de Estado

Estado de Error:

Estado Disabled:

5. Tamaño Small (SM)

# Componente Input

El Input es la unidad fundamental para la captura textual de datos en los formularios del portal del Gobierno de Navarra. Extraído nativamente desde su contexto en Figma, prioriza el semantismo de HTML al implementar de manera abstracta su control visual permitiendo agrupar con ligereza la iconografía en su interior sin falsear box-sizing.

Nomenclatura y BEM

Se utiliza el bloque .gn-input de forma obligatoria para encapsular tanto el control principal como su contador (en caso de disponer de él).

* .gn-input: El contenedor en bloque principal. * .gn-input__control: El contenedor visual que dibuja las fronteras del input (borders y backgrounds). * .gn-input__field: El verdadero elemento semántico <input>. * .gn-input__icon: Slots reservados opcionales para inyectar SVG inlined decorativos (Left/Right). * .gn-input__count: Mensajes auxiliares del contenedor (caracteres permitidos).

Tamaños

- Por defecto (md): 400px de anchura, 53px de altura. - SM (.gn-input--sm): 264px de anchura, 35px de altura. Se debe aplicar sobre la raíz .gn-input.

Estados y Accesibilidad

La delegación visual del foco visualizado en Figma viaja desde el input hacia el contenedor padre visual (.gn-input__control) usando nativamente CSS :focus-within.

Es importante proveer adecuadamente del atributo disabled al elemento gn-input__field y envolver el error en .gn-input--error sobre el padre raíz, lo que priorizará el override rojo. Cuando un .gn-input__count es inyectado acompañando al control, es indispensable enlazarlos bajo las normas ARIA mediante aria-describedby="IdCount".

HTML

<div class="gn-input">
  <div class="gn-input__control">
    <div class="gn-input__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
      </svg>
    </div>
    <input type="text" class="gn-input__field" placeholder="Placeholder text" aria-describedby="gn-input-count" aria-label="Label del input" />
    <div class="gn-input__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      </svg>
    </div>
  </div>
  <div class="gn-input__count" id="gn-input-count">
    <span>100</span> caracteres permitidos
  </div>
</div>