Textarea

Control de texto multilínea con modelo de valor público, opciones de tamaño e integración con Signal Forms.

Categoría: Formularios y selección
Import: @neural-ui/core/textarea
Selector: neu-textarea

import { NeuTextareaComponent } from '@neural-ui/core/textarea';

Visión general

NeuTextarea envuelve un textarea nativo multilínea con un modelo público value. Filas, política de tamaño, etiqueta, ayuda y presentación de error son inputs del componente; la validación del formulario sigue siendo externa.

Valor multilínea básico

Enlaza value con una signal de la aplicación. Escribir actualiza el modelo y las escrituras externas actualizan el textarea.

Notas de entregaAñade contexto útil para el equipo

Caracteres: 0

Configurador

Ajusta el tamaño y las filas, la altura automática y el redimensionado manual. Prueba los estados de solo lectura, deshabilitado y validación en la vista previa y el código generado.

Vista previa

Notas

Valor actual de la aplicación

Opciones avanzadas · 11

Comportamiento y contenido

maxLength

minLength

Estado del formulario

dirty

hidden

pending

touched

Accesibilidad

ariaDescribedBy

ariaLabel

ariaLabelledBy

name

inputId

Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.

El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.

Template generado. La pestaña Código incluye los imports y el estado.

<neu-textarea
  [(value)]="text"
  label="Notas"
  size="md"
  [rows]="3"
  [autoResize]="false"
  [resizable]="true"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const text = signal("");

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

pattern · readonly RegExp[]

En Código: define pattern con este tipo y utiliza [pattern]="pattern" (o pattern() si es una signal).

Tamaño y estados de interacción

autoResize adapta la altura al contenido; resizable controla el ajuste vertical manual cuando autoResize está desactivado. Disabled bloquea foco y edición; readonly mantiene el foco pero impide editar. La demo usa inputs reales fuera de FormField.

Notas revisables

Caracteres aplicados: 11

Signal Forms

Conecta FormField a value. Define las reglas de campo obligatorio y longitud mínima en el esquema del formulario; después prueba la edición y el restablecimiento.

Fundamento de Signal Forms · Propiedad del estado

Motivo del cambio

touched: false · dirty: false · valid: false

Validación y estado de error

Define la validación en el esquema del formulario y proporciona errorMessage para mostrar el error. Core refleja el estado no válido y asocia el mensaje al campo.

pattern transmite metadatos de validación de FormValueControl. Un textarea nativo no valida el atributo HTML pattern: usa una regla de patrón en el esquema del formulario o un validador de tu aplicación; este input por sí solo no valida el texto.

Propiedad del modelo y eventos

Conecta [(value)] al signal de texto de la aplicación. Escucha touch solo si necesitas reaccionar a la pérdida de foco. Para cambiar el texto al restablecer, actualiza el valor de la aplicación o el campo del formulario.

Accesibilidad y teclado

Core conecta la etiqueta, la ayuda y el mensaje de error al textarea nativo y refleja el estado del formulario. Intro añade una línea; los campos de solo lectura mantienen el foco.

Tu aplicación proporciona una etiqueta útil, reglas de validación y mensajes que expliquen cómo corregir el error. No uses el placeholder como única etiqueta.

Fundamento de accesibilidad

Tecla	Acción
`Enter`	Inserta una línea en el textarea nativo enfocado.
`Tab`	Mueve el foco en lugar de insertar una tabulación.

API

value contiene el texto editable; touch informa de la pérdida de foco. Los inputs de presentación y estado del formulario se enumeran por separado.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs de los elementos que describen el textarea nativo, separados por espacios. Úsalo para ayuda o mensajes de validación.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible del textarea nativo cuando su label visible no es suficiente.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	IDs de los elementos que nombran el textarea nativo, separados por espacios.
`autoResize`	`boolean`	`false`	`[autoResize]`	Adapta la altura al contenido y desactiva el ajuste manual.
`dirty`	`boolean`	`false`	`[dirty]`	Estado dirty aplicado, normalmente aportado por FormField.
`disabled`	`boolean`	`false`	`[disabled]`	Deshabilita el textarea nativo y lo retira del foco.
`errorMessage`	`string`	`''`	`[errorMessage]`	Texto de error visible explícito cuando existe estado de error.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación aplicados, normalmente desde el esquema.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el host del componente.
`hint`	`string`	`''`	`[hint]`	Ayuda asociada al textarea nativo hasta que un error visible la sustituye.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-textarea-')`Valor derivado	`[inputId]`	ID compartido por el textarea nativo y sus referencias de etiqueta/ayuda.
`invalid`	`boolean`	`false`	`[invalid]`	Marca invalid aplicada; no valida el texto por sí misma.
`label`	`string`	`''`	`[label]`	Etiqueta visible asociada al textarea nativo.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Longitud máxima de texto nativa.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Longitud mínima nativa; la validación del esquema es independiente.
`name`	`string`	`''`	`[name]`	Nombre nativo del control de formulario.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	Metadatos de patrón de FormValueControl. Define la validación en el esquema del formulario; un textarea nativo no valida HTML pattern.
`pending`	`boolean`	`false`	`[pending]`	Estado pending aplicado anunciado mediante aria-busy.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene el textarea nativo enfocable mientras bloquea la edición.
`required`	`boolean`	`false`	`[required]`	Marca el textarea nativo como obligatorio; la validez del esquema procede del formulario.
`resizable`	`boolean`	`true`	`[resizable]`	Permite ajuste manual horizontal y vertical dentro del contenedor cuando autoResize está desactivado.
`rows`	`number`	`3`	`[rows]`	Número inicial de filas nativas.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	`[size]`	Tamaño pequeño, mediano o grande del control.
`touched`	`boolean`	`false`	`[touched]`	Estado touched aplicado, normalmente aportado por FormField.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`string`	`''`	`[(value)]`	Modelo de texto multilínea bidireccional propiedad de la aplicación o FormField.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`touch`	`void`	`(touch)="onTouch($event)"`	Aviso de ciclo de vida emitido cuando el textarea pierde foco.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Tematización

Textarea no tiene tokens públicos --neu-textarea-* propios. Usa el tema global de Core y la guía Temas para personalizar los colores compartidos y la apariencia.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-border-focus`	Borde del control con foco	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-primary)`
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-error-text`	Texto de error y de Button danger outline/ghost en ambos temas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#991b1b`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-focus-ring-alpha`	Opacidad del anillo de foco semántico	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`25%`
`--neu-focus-ring-width`	Grosor del anillo, incluido el foco con error	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`3px`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`