Textarea

2.3.0

O componente Textarea permite ao usuário inserir ou editar informações em formato de texto longo.

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;

Anatomia do componente

O componente é composto por um campo de texto de duas linhas ou mais com borda.

Guidelines

Utilizamos o componente Textarea quando precisamos que o usuário insira informações em formato de texto ou numérica que ocupe mais que uma linha.

Validação

Os Textareas têm a possibilidade de validar visualmente as informações inseridas, sejam elas corretas ou não.

Para isso, a borda do componente muda de cor conforme a informação é inserida, e vem acompanhada de um ícone e texto de ajuda que pode reforçar a mensagem.

Lembre-se de que é importante não depender exclusivamente da cor para transmitir um estado, pois alguns usuários podem ter dificuldade em ver as cores corretamente.

Conteúdo

Os Textareas têm a possibilidade de validar visualmente as informações inseridas, sejam elas corretas ou não.

Em primeiro lugar, sempre devemos acompanhar o Textarea de uma label, que informe adequadamente o dado que deve ser inserido. A label deve estar visível a todo o momento, já que ajuda o usuário a sempre entender a informação que está sendo solicitada.

Além disso, podemos utilizar o placeholder para dar mais contexto ou um exemplo que ajude o usuário a entender melhor qual informação está sendo solicitada. Este placeholder não deve ser condicionado ao tipo de informação que deve ser inserida, uma vez que desaparece após a digitação.

Ao validar as informações temos a possibilidade de mostrar uma mensagem de erro para indicar ao usuário que o dado inserido está incorreto. Além da mensagem, também contamos com um ícone que aparece automaticamente para dar uma pista visual do que está acontecendo.

Recomendação de uso

Inserir textos longos em um formulário
Inserir textos com mais de uma linha em formulários
Inserir descrições de produtos

Componentes relacionados

Input - Pode ser utilizado quando a informação a ser inserida cabe em uma única linha.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/textarea

Props

Additional props are passed to the <Textarea> element. See textarea docs for a list of props accepted by the <Textarea> element.

Textarea

Name	Type	Default	Description
appearance	'danger' 'neutral' 'success' 'warning'	'neutral'	Change the visual style of the textarea.
lines	number	'2'	Number of lines to be rendered for the user to input text
id*	string		ID of the textarea

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.