Carregando…Carregando…Carregando…Carregando…Multi-line text input with auto-resize, count, 4 variants and validation states.
$ npx kikitocn add textarea@/lib/utilsimport { Textarea } from "@/components/ui/cn/textarea/Textarea";
export function TextareaExample() {
return (
<Textarea
label="Mensagem"
placeholder="Escreva aqui..."
hint="Máximo 500 caracteres"
rows={4}
/>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'outline' | 'filled' | 'ghost' | 'outline' | Estilo visual do textarea |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do textarea |
state | 'default' | 'error' | 'success' | 'warning' | 'default' | Estado visual de validação |
label | string | undefined | Label acima do textarea |
helperText | string | undefined | Texto de apoio abaixo do textarea |
errorText | string | undefined | Mensagem de erro |
showCount | boolean | false | Exibe contador de caracteres (requer maxLength) |
autoResize | boolean | false | Cresce automaticamente conforme o conteúdo |
maxRows | number | undefined | Limite máximo de linhas no auto-resize |
resize | 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical' | Controla qual direção pode ser redimensionada |
Outline (default)
Filled
Ghost
Error · success
Auto-resize · char count