Home/Componentes/Textarea

Textarea

Form Control

Campo de entrada de texto multilinha para formulários e comentários.

Preview

Visualização do componente Textarea

Mensagem

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add textarea

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { Textarea } from "@scmposs/hollow-ui"

<Textarea placeholder="Digite aqui..." />

Exemplos

Diferentes casos de uso do componente Textarea

Com Label

Descrição

<div className="space-y-2">
  <Label htmlFor="description">Descrição</Label>
  <Textarea 
    id="description" 
    placeholder="Descreva o problema..." 
  />
</div>

Com Contador de Caracteres

Comentário

0/500 caracteres

const [value, setValue] = useState("");
const charCount = value.length;
const maxChars = 500;

<div className="space-y-2">
  <Label htmlFor="comment">Comentário</Label>
  <Textarea
    id="comment"
    value={value}
    onChange={(e) => setValue(e.target.value)}
    maxLength={maxChars}
  />
  <p className="text-sm text-muted-foreground text-right">
    {charCount}/{maxChars} caracteres
  </p>
</div>

Estado Desabilitado

<Textarea 
  placeholder="Campo desabilitado" 
  disabled 
  value="Este campo está desabilitado"
/>

Diferentes Tamanhos

Pequeno (min-h-16)

Médio (min-h-24)

Grande (min-h-32)

<Textarea className="min-h-16" />
<Textarea className="min-h-24" />
<Textarea className="min-h-32" />

Formulário Completo

Enviar Feedback

Compartilhe sua opinião conosco

Nome

Mensagem

<Card>
  <CardHeader>
    <CardTitle>Enviar Feedback</CardTitle>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="name">Nome</Label>
      <Input id="name" placeholder="Seu nome" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="message">Mensagem</Label>
      <Textarea
        id="message"
        placeholder="Digite seu feedback..."
        className="min-h-32"
      />
    </div>
    <Button>Enviar Feedback</Button>
  </CardContent>
</Card>

Propriedades

Props disponíveis para o componente Textarea

Prop	Tipo	Padrão	Descrição
placeholder	string	-	Texto de placeholder
value	string	-	Valor controlado do textarea
disabled	boolean	false	Desabilita o textarea
maxLength	number	-	Número máximo de caracteres
rows	number	-	Número de linhas visíveis
className	string	-	Classes CSS customizadas

Nota: O componente aceita todas as props nativas do elemento textarea do HTML.

Diretrizes de Uso

✅ Quando usar

Para entrada de texto longo e multilinha
Comentários, descrições e feedback
Mensagens e conteúdo de formulários
Quando precisar de mais de uma linha de texto

❌ Quando evitar

Para entrada de texto de uma única linha (use Input)
Para senhas ou dados sensíveis curtos
Quando o espaço vertical é limitado

💡 Dicas

Sempre use um Label para melhor acessibilidade
Considere adicionar contador de caracteres para limites
Use placeholder descritivo e útil
Ajuste min-h com classes Tailwind conforme necessário

Acessibilidade

Sempre associe um <Label> usando o atributo htmlFor
Use aria-describedby para mensagens de erro ou dicas
Considere aria-invalid para estados de erro
O componente suporta navegação por teclado nativa
Use required e aria-required para campos obrigatórios