AppTextarea

Átomos

Campo de texto de várias linhas com rótulo, texto de apoio, mensagem de erro e tags opcionais.

Quando usar: mensagens, comentários e descrições longas; use tags para exibir seleções dentro da caixa.

Quando não usar: texto curto de uma linha (use AppInput).

O ref e o className são repassados ao <textarea>. Altura inicial: rows (Padrão: 3).

Importar

import { AppTextarea } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppTextarea.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppTextarea.css';

Exemplos

Default

const Default = () => <AppTextarea label="Mensagem" placeholder="Escreva sua mensagem" />;

With Hint

const WithHint = () => <AppTextarea
    label="Mensagem"
    placeholder="Escreva sua mensagem"
    hint="Máximo de 500 caracteres." />;

With Error

const WithError = () => <AppTextarea
    label="Mensagem"
    placeholder="Escreva sua mensagem"
    error="Escreva ao menos 10 caracteres." />;

Disabled

const Disabled = () => <AppTextarea
    label="Mensagem"
    placeholder="Escreva sua mensagem"
    disabled
    defaultValue="Campo indisponível" />;

With Tags

const WithTags = () => <TextareaWithTags label="Mensagem" placeholder="Escreva sua mensagem" />;

Props

Prop	Tipo	Padrão	Descrição
`label`*	`string`	`—`	Rótulo visível do campo (obrigatório): vira o nome acessível via `<label htmlFor>`.
`error`	`string`	`—`	Mensagem de erro: troca o hint, pinta o campo de vermelho e marca `aria-invalid`.
`hint`	`string`	`—`	Texto de apoio abaixo do campo. Some enquanto houver `error`.
`tags`	`ReactNode`	`—`	Tags (`AppTag`) exibidas dentro da caixa, acima do texto.