Textarea
El componente Textarea permite a la persona usuaria ingresar y editar información en formato de texto largo.
import 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;Se compone por un campo de texto de 2 o más líneas con borde.
Usamos este componente cuando necesitamos que la persona usuaria ingrese información en formato de texto o numérica que ocupa más de una línea.
Los Textarea tienen la posibilidad de validar visualmente la información ingresada, ya sean correctas o no.
Para eso, el borde del componente cambia de color según la información es ingresada, y se acompaña de un icono y texto de ayuda para reforzar el mensaje.
Recordá que es importante no depender exclusivamente del color para comunicar un estado, ya que algunas personas usuarias pueden tener dificultad para ver los colores correctamente.
El componente posee la capacidad de validar visualmente la información ingresada, según si es correcta o no.
En primer lugar, debemos acompañar el Textarea con un Label, que informe adecuadamente el dato que debe ser ingresado. El label debe estar visible en todo momento, ya que ayuda a que la persona usuaria entienda la información que está siendo solicitada.
Más allá de esto, podemos usar el placeholder para dar más contexto u ofrecer ejemplos que ayuden a entender mejor cuál es la información solicitada. Este placeholder no debe ser condicionado al tipo de información a ingresar, ya que desaparece al escribir.
Al validar la información, tenemos la posibilidad de mostrar un mensaje de error para indicar a la persona usuaria que el dato ingresado es incorrecto. Junto con el mensaje, también contamos con un icono que aparece automáticamente para dar una pista visual de lo que está sucediendo.
- Ingresar textos largos en un formulario
- Ingresar textos de más de una línea en formularios
- Ingresar descripciones de productos
- Input - Puede ser usado cuando la información a ingresar entra en una sola línea.
Instalá el componente via terminal.
npm install @nimbus-ds/textareaLas propiedades adicionales se pasan al elemento <Textarea>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <Textarea>.
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. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |