DIANA

Diseño Aplicaciones Navarra

Text area

Campo de texto multilínea para introducir contenido más extenso, con soporte para redimensionado y estados de validación.

Estado: review

1. Control base (md)

Mostrar HTML 
<div class="gn-textarea">
  <textarea id="ta-md-default" class="gn-textarea__control" aria-label="Descripción" placeholder="Escribe una descripción"></textarea>
</div>

2. Control base con valor

Mostrar HTML 
<div class="gn-textarea">
  <textarea id="ta-md-filled" class="gn-textarea__control" aria-label="Descripción con valor">Contenido de ejemplo con contador activo.</textarea>
</div>

3. Control base contenido largo / overflow

Mostrar HTML 
<div class="gn-textarea">
  <textarea id="ta-md-long" class="gn-textarea__control" aria-label="Comentario extenso">Este es un contenido largo de ejemplo para documentar el comportamiento de overflow vertical del componente. Al superar la altura inicial del textarea, aparece el scroll interno sin romper el layout general del formulario.</textarea>
</div>

4. Control base focus-visible (simulado para docs)

Mostrar HTML 
<div class="gn-textarea">
  <textarea id="ta-md-focus" class="gn-textarea__control" aria-label="Textarea estado focus">Foco visible simulado para documentación.</textarea>
</div>

5. Control base error

Mostrar HTML 
<div class="gn-textarea gn-textarea--error">
  <textarea id="ta-md-error" class="gn-textarea__control" aria-label="Textarea estado error" aria-invalid="true">Contenido con error de validación.</textarea>
</div>

6. Control base disabled

Mostrar HTML 
<div class="gn-textarea gn-textarea--disabled">
  <textarea id="ta-md-disabled" class="gn-textarea__control" aria-label="Textarea estado disabled" disabled>Componente deshabilitado.</textarea>
</div>

7. Control base small

Mostrar HTML 
<div class="gn-textarea gn-textarea--sm">
  <textarea id="ta-sm-default" class="gn-textarea__control" aria-label="Textarea small" placeholder="Texto breve"></textarea>
</div>

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

Añade la información principal del trámite.

Error: Debes completar este campo.

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="ta-composed">
    Descripción<span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span>
  </label>
  <span class="gn-field__hint" id="ta-composed-hint">Añade la información principal del trámite.</span>
  <div class="gn-textarea gn-textarea--error">
    <textarea id="ta-composed" class="gn-textarea__control" aria-invalid="true" aria-describedby="ta-composed-hint ta-composed-error" required>Texto inicial de ejemplo.</textarea>
  </div>
  <p class="gn-field__error" id="ta-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 completar este campo.</span>
  </p>
</div>

9. Character count (vacío)

200 caracteres permitidos

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

10. Character count (dentro del límite)

3 caracteres restantes

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="ta-cc-ok">Mensaje</label>
  <div class="gn-textarea">
    <textarea class="gn-textarea__control" id="ta-cc-ok" name="ta-cc-ok" data-gn-character-count-max="20" aria-describedby="ta-cc-ok-counter">12345678901234567</textarea>
  </div>
  <p id="ta-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();
});

11. Character count (excedido)

2 caracteres más de los permitidos

Mostrar HTML 
<div class="gn-field">
  <label class="gn-field__label" for="ta-cc-over">Mensaje</label>
  <div class="gn-textarea">
    <textarea class="gn-textarea__control" id="ta-cc-over" name="ta-cc-over" data-gn-character-count-max="10" aria-describedby="ta-cc-over-counter">123456789012</textarea>
  </div>
  <p id="ta-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();
});