DIANA

Diseño Aplicaciones Navarra

Text input

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

Estado: review

1. Control base (md)

Mostrar HTML 
<div class="gn-input">
  <input aria-label="Nombre completo" type="text" class="gn-input__control" placeholder="Ej: Juan Pérez" />
</div>

2. Control base con icono search

Mostrar HTML 
<div class="gn-input gn-input--icon-search">
  <input aria-label="Buscar expediente" type="text" class="gn-input__control" placeholder="Buscar..." />
</div>

3. Control base con error

Mostrar HTML 
<div class="gn-input gn-input--error">
  <input aria-label="DNI o NIE" type="text" class="gn-input__control" value="12345678" aria-invalid="true" />
</div>

4. Control base disabled

Mostrar HTML 
<div class="gn-input gn-input--disabled">
  <input aria-label="Identificador interno" type="text" class="gn-input__control" value="ID-4091" disabled />
</div>

5. Control base small

Mostrar HTML 
<div class="gn-input gn-input--sm gn-input--icon-search">
  <input aria-label="Buscar filtro" type="text" class="gn-input__control" value="Navarra" />
</div>

6. Composición de campo (label + hint + required + clear)

Escribe tu nombre completo.
Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="input-composed">
    Nombre<span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span>
  </label>
  <span class="gn-field__hint" id="input-composed-hint">Escribe tu nombre completo.</span>

  <div class="gn-input gn-input--with-clear gn-input--icon-search">
    <input id="input-composed" type="text" class="gn-input__control" value="Texto de ejemplo" required aria-describedby="input-composed-hint" />
    <button type="button" class="gn-input__clear" data-gn-input-clear aria-label="Borrar texto">
      <svg focusable="false" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <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>
    </button>
  </div>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initInputClearButtons();
});

7. Composición de campo con error

Error: Formato inválido.

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="input-error-composed">Código de expediente</label>
  <div class="gn-input gn-input--error">
    <input id="input-error-composed" class="gn-input__control" type="text" value="12" aria-invalid="true" aria-describedby="input-error-msg" />
  </div>
  <p class="gn-field__error" id="input-error-msg">
    <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">Formato inválido.</span>
  </p>
</div>

8. Character count (vacío)

10 caracteres permitidos

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="input-cc-empty">Alias</label>
  <div class="gn-input">
    <input class="gn-input__control" id="input-cc-empty" name="input-cc-empty" type="text" data-gn-character-count-max="10" aria-describedby="input-cc-empty-counter">
  </div>
  <p id="input-cc-empty-counter" class="gn-field__character-count" data-gn-character-count aria-live="polite">10 caracteres permitidos</p>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initCharacterCounts();
});

9. Character count (dentro del límite)

3 caracteres restantes

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="input-cc-ok">Alias</label>
  <div class="gn-input">
    <input class="gn-input__control" id="input-cc-ok" name="input-cc-ok" type="text" value="0000000" data-gn-character-count-max="10" aria-describedby="input-cc-ok-counter">
  </div>
  <p id="input-cc-ok-counter" class="gn-field__character-count" data-gn-character-count aria-live="polite">3 caracteres restantes</p>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initCharacterCounts();
});

10. Character count (excedido)

2 caracteres más de los permitidos

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="input-cc-over">Alias</label>
  <div class="gn-input">
    <input class="gn-input__control" id="input-cc-over" name="input-cc-over" type="text" value="000000000000" data-gn-character-count-max="10" aria-describedby="input-cc-over-counter">
  </div>
  <p id="input-cc-over-counter" class="gn-field__character-count" data-gn-character-count aria-live="polite">2 caracteres más de los permitidos</p>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initCharacterCounts();
});