Textarea
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;O componente é composto por um campo de texto de duas linhas ou mais com borda.
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.
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.
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.
- Inserir textos longos em um formulário
- Inserir textos com mais de uma linha em formulários
- Inserir descrições de produtos
- Input - Pode ser utilizado quando a informação a ser inserida cabe em uma única linha.
Instale o componente via terminal.
npm install @nimbus-ds/textareaPropriedades adicionais são repassadas ao elemento <Textarea>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo 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. |