Todos los componentes (204)

Texto largo

Campos · TextArea

Qué es y cuándo usarlo

El campo de texto largo: notas, instrucciones de entrega, motivos. Sale con las filas que se le pidan, crece al escribir hasta 20 líneas (a partir de ahí sale la barra) y se puede estirar a mano hacia abajo, nunca a lo ancho.

Cuándo usarlo

Todo lo que puede ocupar más de una línea: las observaciones de un pedido, el motivo de una devolución, la descripción de un producto.
rows para el alto de salida (de 1 a 12). counter con maxLength cuando hay un límite que respetar, como el resumen que sale en un correo.

Cuándo no

Una sola línea (un nombre, una referencia): TextField.
Responder en un hilo de comentarios: Comments, que ya trae su campo de respuesta.

Teclado: Tab entra y sale; Intro hace un salto de línea, no envía el formulario.

Accesibilidad: la etiqueta es obligatoria; la ayuda y el error se leen como descripción. Con counter, la cuenta («123 / 500») se ve siempre pero solo se anuncia cuando quedan 20 caracteres o menos («Quedan 15 caracteres») y al llegar al límite: una cuenta por tecla atropellaría al lector de pantalla. Cuando quedan pocos, la cuenta pasa al color de aviso y a negrita, no solo cambia de color.

Aspecto fino: sin variables propias: usa las del campo (--amset-field-*) y se ajusta con las clases amset-area__control, amset-area__entry, amset-area__footer y amset-area__counter. Crecer solo depende de field-sizing: donde el navegador no lo admite, se queda en sus filas y se estira a mano.

Cómo se ve

Instrucciones para el reparto

Resumen para el correo

<TextArea label="Instrucciones para el reparto" placeholder="Porteria, horario..." rows={3} />
<TextArea label="Resumen para el correo" counter maxLength={160} hint="Sale en el correo que recibe el cliente" />

Props

Se importa con import { TextArea } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`className`	`string`	—
`counter`	`boolean`	Enseña «123 / 500». Necesita `maxLength` para saber el limite.
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`error`	`string`	—
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (una celda de tabla, un grupo de filtros), nunca para ahorrar espacio.
`hint`	`string`	—
`inputRef`	`Ref<HTMLTextAreaElement>`	El `<textarea>` de verdad, para enfocarlo, seleccionar su texto o medirlo desde fuera. Va aparte del `ref` porque el componente pinta una caja con etiqueta, ayuda y error, y quien pide un ref casi siempre quiere el control.
`invalid`	`boolean`	—
`onChange`	`(value: string) => void`	—
`onChangeEvent`	`(event: ChangeEvent<HTMLTextAreaElement>) => void`	Como `onChange`, pero con el evento nativo del `<textarea>`: `e.target.value`, `e.currentTarget`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres el texto, `onChange` lo entrega ya.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`rows`	`number`	Filas que se ven de salida (de 1 a 12). Al escribir mas, crece solo hasta 20.
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion.
`value`	`string`	—
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: