Text Area

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

Estado: draftEtiquetas: form, input, textarea

Vista Previa

1. Text Area Default (Talla MD 400px x 111px)

300 caracteres permitidos

2. Text Area Relleno

3. Variantes de Estado

Estado de Error:

Estado Disabled:

4. Tamaño Small (SM)

# Componente Text Area

El TextArea es el componente de formulario diseñado para recopilar grandes volúmenes de texto de los usuarios.

Nomenclatura y BEM

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

* .gn-textarea: El contenedor padre flexible. * .gn-textarea__control: El contenedor visual estático (donde reside el borde simulado nativo, de 111px para Default y 73px para SM). * .gn-textarea__field: El verdadero elemento semántico <textarea>. Presenta anulado su _resize_ nativo para no romper la envolvente visual de BEM. * .gn-textarea__resize-icon: Slot decorativo que posiciona vía CSS el manejador visual de arrastre extraído tal cual de Figma, evitando pisar el redimensionamiento si se forzara nativamente con JS o CSS extra (pointer-events: none). * .gn-textarea__count: Mensajes auxiliares del contenedor (caracteres permitidos).

Tamaños

- Por defecto (md): 400px de anchura, 111px de altura máxima inicial con scroll automático auto. - SM (.gn-textarea--sm): 264px de anchura, 73px de altura. Se debe aplicar sobre el padre .gn-textarea.

Estados y Accesibilidad

Hereda el comportamiento nativo y exacto de foco simulado desde el TextArea central delegando con :focus-within al contorno visual (.gn-textarea__control), renderizando el efecto *glow* de 6px estipulado.

Soporta disabled directo y modificador de .gn-textarea--error para desatar la frontera gruesa rojiza del framework.

HTML

<div class="gn-textarea">
  <div class="gn-textarea__control">
    <textarea aria-label="Texto Descriptivo" class="gn-textarea__field" placeholder="Escribe aquí tu texto..."></textarea>
    <div class="gn-textarea__resize-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
        <path d="M0.353577 8.35352L8.35358 0.353516M4.46168 8.35352L8.35358 4.46162" stroke="currentColor"/>
      </svg>
    </div>
  </div>
  <div class="gn-textarea__count">
    <span>1000</span> caracteres permitidos
  </div>
</div>