componentes / textarea

Textarea

Campo de texto de várias linhas com rótulo, texto de ajuda e de erro, e os mesmos estilos de foco do Input.

Como usar

Um `<textarea>` com todas as props nativas, `label`, `helperText` e `errorMessage`. Compartilha `variant` (`ring` ou `outline`), cores, tamanhos, radius e `customColor` com o `Input`, e deixa escolher o `resize`.

preview

Mensagem

BioAlgumas palavras sobre você

Textarea.tsx

import { Textarea } from "vaiperui";
 
<Textarea label="Mensagem" rows={4} />
<Textarea
  label="Bio"
  helperText="Algumas palavras sobre você"
  resize="none"
/>

Cores

preview

primary

success

warning

danger

cores.tsx

<Textarea variantColor="primary" placeholder="primary" />
<Textarea variantColor="success" placeholder="success" />
<Textarea variantColor="warning" placeholder="warning" />
<Textarea variantColor="danger" placeholder="danger" />

Tamanhos

preview

tamanhos.tsx

<Textarea size="sm" placeholder="sm" />
<Textarea size="md" placeholder="md" />
<Textarea size="lg" placeholder="lg" />

Redimensionar

preview

none

vertical

both

redimensionar.tsx

<Textarea resize="none" />
<Textarea resize="vertical" />
<Textarea resize="both" />

Estados

preview

ajudaDetalhe extra

ajuda

erroIsto é obrigatório

erro

desabilitado

estados.tsx

<Textarea label="..." helperText="..." />
<Textarea label="..." errorMessage="..." />
<Textarea label="..." disabled />

Cor personalizada

preview

Laranja

cor-personalizada.tsx

<Textarea customColor="#ff6600" label="Laranja" />

Props

Prop	Valores	Padrão	Descrição
variant	ring \| outline	ring	Estilo de foco: anel ou apenas contorno
variantColor	primary \| success \| warning \| danger	primary	Cor do estilo de foco
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema). Substitui o variantColor
size	sm \| md \| lg	md	Espaçamento e tamanho do texto
radius	none \| sm \| md \| lg \| full	md	Arredondamento dos cantos
animation	none \| smooth \| fast \| bounce	smooth	Transição ao focar
resize	none \| vertical \| horizontal \| both	vertical	Em quais direções o usuário pode arrastar para redimensionar
rows	number	3	Linhas visíveis
label	string	nenhum	Rótulo acima do campo
helperText	string	nenhum	Texto de ajuda abaixo do campo
errorMessage	string	nenhum	Texto de erro; só a presença dele já força o estado de erro
(nativas)	TextareaHTMLAttributes<HTMLTextAreaElement>	nenhum	value, defaultValue, onChange, placeholder, maxLength, disabled, aria-*, className, ref etc.

Acessibilidade

Renderiza um `<textarea>` nativo, então papel, edição de texto, seleção e corretor ortográfico vêm do navegador.
`label` é um `<label htmlFor>` ligado ao campo pelo `id` (gerado quando você não passa um).
`errorMessage` define `aria-invalid="true"`, e `aria-describedby` aponta para o texto de erro, ou para o `helperText` quando não há erro.
Só uma descrição é vinculada por vez: o erro substitui o texto de ajuda.
`disabled` e os demais atributos nativos (`readOnly`, `required`, `maxLength`) vão direto para o elemento.

Tenha em mente

Sem `label`, passe `aria-label` ou `aria-labelledby`; o campo não tem outro nome.
O texto de erro não é uma live region, então não é anunciado quando aparece; é lido quando o campo recebe foco.