Textarea
Permite ingresar y editar texto o contenido extenso en un campo de múltiples líneas.
- Ingresar descripciones o notas: contenido extendido que abarca varias líneas, como la descripción de un producto, nota de envío o comentario de pedido. Ej.: "Agregar descripción del producto", "Dejar instrucciones especiales de entrega".
- Recopilar feedback o comentarios: campos que esperan respuestas más desarrolladas del comerciante, no etiquetas simples.
- Editar textos más extensos: cuando el contenido puede ocupar múltiples líneas y requiere espacio suficiente para visualizar lo escrito mientras se edita.
- Texto que entra en una sola línea: para nombres, títulos cortos o valores simples, usar Input. El Textarea ocupa más espacio y es innecesario si el contenido es breve.
- Mostrar el campo con su etiqueta y mensaje de ayuda integrados: el Textarea no incluye label ni helpText propios. En su lugar, usar Form Field, que compone el Textarea junto con su etiqueta y su texto de ayuda o error.
- Container: caja de entrada que contiene el texto, con borde y fondo, que refleja el estado de validación del campo mediante cambios de color.
- Field: área editable donde se ingresa o edita el valor.
- Placeholder: texto de referencia que se muestra cuando el campo está vacío; desaparece cuando el usuario comienza a escribir.
- Resize Handle: pequeño icono o área en la esquina que permite a los usuarios cambiar la altura o ancho de la caja.
- Scrollbar: aparece automáticamente en el borde cuando el texto ingresado excede la altura visible del contenedor.
Neutral: estado predeterminado del campo; utilizar cuando no hay validación activa.
Success: indica que el contenido ingresado es válido.
Warning: advierte sobre contenido que requiere revisión o acción, sin bloquear la entrada.
Danger: indica un error de validación en la retroalimentación visual. Las aplicaciones deben validar y bloquear el envío si es necesario.
Transparent: estilo sin borde visible, útil en contextos de contenido editable integrado dentro de tarjetas o áreas de lectura.
AI generative: aplica el borde degradado de Nimbus para campos usados en contextos de IA (Lumi).
AI generated: indica que el valor actual del campo fue generado por IA, con su propio anillo de foco. Es independiente de appearance y puede combinarse con cualquiera de sus valores.
2 líneas: altura predeterminada; balance entre visibilidad y compacidad en formularios.
4 líneas: mayor espacio para contenido extenso; usar cuando se espera descripción más desarrollada.
Autogrow: el campo crece automáticamente conforme se añade contenido, hasta un máximo definido; proporciona una experiencia de escritura fluida sin scroll interno.
Resize habilitado: el usuario puede ajustar el tamaño del campo arrastrando la esquina inferior derecha; útil cuando el contenido es impredecible.
Resize deshabilitado: tamaño fijo; mantiene la coherencia del layout cuando múltiples campos comparten el mismo espacio.
El Textarea se utiliza en formularios para recopilar contenido extenso, como descripciones de productos, instrucciones especiales de envío o respuestas a encuestas. Funciona de forma similar en desktop y mobile, manteniendo su capacidad de adaptarse al contenido o al espacio disponible. Cuando el campo necesita etiqueta y mensaje de ayuda o error compuestos junto al control, se utiliza a través de Form Field.
Descripción del producto
Acompañar el Textarea con un label claro que describa el contenido esperado.
Utilizar el Textarea sin contexto de label o sin explicación clara del tipo de contenido requerido.
Completa este campo
Validar el contenido y comunicar el resultado con la apariencia correcta (success, warning, danger) acompañada de un mensaje de texto.
Depender solo del color para comunicar errores; siempre acompaña con un mensaje de texto.
Proporcionar un placeholder descriptivo que guíe sobre el formato o extensión esperada del contenido.
Dejar el placeholder vacío o genérico; el usuario puede perder contexto del tipo de información solicitada.
- Asociar label al campo: vincular siempre el label al Textarea mediante el atributo htmlFor del label y el id del campo, o componerlo con Form Field, que ya gestiona la asociación entre etiqueta, campo y mensaje de ayuda. Los usuarios de lectores de pantalla entienden qué dato es solicitado.
- Validación accesible: cuando hay error, comunicar el mensaje no solo con color sino también con texto; los usuarios con dificultad en la percepción del color reciben la información igualmente.
- Placeholder como ayuda, no como label: el placeholder desaparece al escribir y no reemplaza al label; utilizar solo como pista adicional sobre el formato esperado.
- Indicar límites de caracteres: si el campo tiene restricción, mostrar un contador o aviso accesible (ej.: "0 de 300 caracteres") para que el usuario sepa cuándo se acerca al límite.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Textarea } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Textarea
appearance="neutral"
id="id"
lines={2}
placeholder="Placeholder text"
/>
);
export default Example;Las propiedades adicionales se pasan al elemento <textarea>. Consultá la documentación del elemento textarea para ver la lista de atributos aceptados.
- Input — Para ingresar texto que entra en una sola línea.
- Form Field — Para componer el Textarea junto con su etiqueta y su mensaje de ayuda o error.
Textarea
| Name | Type | Default | Description |
|---|---|---|---|
appearance | 'ai-generative' | 'neutral' | Change the visual style of the textarea. |
aiGenerated | boolean | Highlights the field to indicate its value was generated by AI. Applies AI gradient border, white background and an AI focus ring. | |
lines | number | '2' | Number of lines to be rendered for the user to input text |
autoGrow | boolean | 'false' | Controls intrinsic sizing behavior of the field. When true, the textarea will grow with content up to the maxLines limit (if provided) and then scroll. |
maxLines | number | Caps the textarea visual height to the given number of lines. When used together with autoGrow=true, the textarea will grow with content up to this limit and then scroll. | |
minLines | number | Sets the minimum height of the textarea to the given number of lines. The textarea will never shrink below this height, even when empty. | |
id* | string | ID of the textarea | |
resize | boolean | 'true' | Enable/disable textarea resize functionality |
Textarea.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.