Textarea

Apresentação

O componente Textarea é responsável por criar uma área de texto multilinha que permite aos usuários inserir e editar texto em múltiplas linhas. É ideal para campos que precisam de mais espaço para texto, como comentários, descrições ou mensagens.

Quando usar

• Para campos de texto longos
• Para comentários
• Para descrições
• Para mensagens
• Para feedback
• Para notas
• Para conteúdo de blog
• Para resenhas
• Para formulários de contato
• Para campos de observação

Forma básica de uso

import { Textarea } from 'eitri-luminus';

// Textarea básico
<Textarea placeholder="Digite seu texto aqui" />

// Textarea com valor inicial
<Textarea 
  placeholder="Digite seu texto aqui"
  defaultValue="Texto inicial"
/>

// Textarea com evento onChange
<Textarea 
  placeholder="Digite seu texto aqui"
  onChange={(e) => console.log(e.target.value)}
/>

// Textarea com classes personalizadas
<Textarea 
  placeholder="Digite seu texto aqui"
  className="textarea-primary"
/>

// Textarea desabilitado
<Textarea 
  placeholder="Digite seu texto aqui"
  disabled
/>

// Textarea com valor controlado
const [value, setValue] = useState('');
<Textarea 
  placeholder="Digite seu texto aqui"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// Textarea com elementos internos
<Textarea 
  placeholder="Digite seu texto aqui"
  insideLeft={<span>📝</span>}
  insideRight={<button>Limpar</button>}
/>

// Textarea com label
<div className="flex flex-col gap-2">
  <label htmlFor="comentario">Comentário</label>
  <Textarea 
    id="comentario"
    placeholder="Digite seu comentário aqui"
  />
</div>

Propriedades

Propriedade	Tipo	Descrição
placeholder	string	Texto exibido quando o campo está vazio
value	string	Valor atual (controlado)
defaultValue	string	Valor inicial
disabled	boolean	Desabilita o textarea
onChange	function	Função chamada quando o valor muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente
name	string	Nome do campo no formulário
insideLeft	any	Elemento a ser exibido à esquerda
insideRight	any	Elemento a ser exibido à direita
onClear	function	Função chamada para limpar o campo

Heranças

O componente Textarea herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'textarea' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta elementos internos
• Pode ser usado em layouts flexíveis