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/textareaAdditional props are passed to the <Textarea> element. See textarea docs for a list of props accepted by the <Textarea> element.