Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente Textarea

Última atualização:

Área de texto Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes Textarea capturam entrada de texto multilinhas dos usuários, perfeitos para mensagens, comentários, descrições e conteúdo longo. Construídas com elementos de área de texto HTML nativos e aprimoradas com estilo CSS do Tailwind, as áreas de texto suportam vários tamanhos, cores e estados. Acessíveis e totalmente personalizáveis, integram-se perfeitamente em formulários e interfaces de comunicação.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
textareaBaseEntrada de texto multilinha estilizada
textarea-softEstiloFundo colorido silenciado
textarea-ghostEstiloNenhuma borda visível até o foco
textarea-dashedEstiloEstilo de borda tracejada
textarea-xsTamanhoExtra pequeno
textarea-smTamanhoPequeno
textarea-mdTamanhoMédio (padrão)
textarea-lgTamanhoGrande
textarea-xlTamanhoExtra grande
textarea-2xlTamanho2× extra grande
textarea-primaryCorBorda da cor do tema principal
textarea-secondaryCorBorda colorida do tema secundário
textarea-accentCorBorda de cor do tema de destaque
textarea-neutralCorBorda de cor de tema neutro
textarea-infoCorBorda colorida semântica de informações
textarea-successCorBorda de cor semântica de sucesso
textarea-warningCorBorda de cor semântica de aviso
textarea-errorCorErro na borda da cor semântica

Uso Básico

<textarea class="textarea" placeholder="Enter your message here..."></textarea>

<textarea className="textarea" placeholder="Enter your message here..."></textarea>

Tamanhos de área de texto

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea>

<textarea class="textarea textarea-sm" placeholder="Small"></textarea>

<textarea class="textarea textarea-md" placeholder="Medium"></textarea>

<textarea class="textarea textarea-lg" placeholder="Large"></textarea>

<textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea>

<textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea>

Cores da área de texto

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<textarea class="textarea" placeholder="Default"></textarea>

<textarea class="textarea textarea-primary" placeholder="Primary"></textarea>

<textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea>

<textarea class="textarea textarea-accent" placeholder="Accent"></textarea>

<textarea class="textarea textarea-info" placeholder="Info"></textarea>

<textarea class="textarea textarea-success" placeholder="Success"></textarea>

<textarea class="textarea textarea-warning" placeholder="Warning"></textarea>

<textarea class="textarea textarea-error" placeholder="Error"></textarea>

Estilos de área de texto

html 
1
2
3
4
5
6
7
<textarea class="textarea" placeholder="Default style"></textarea>

<textarea class="textarea textarea-soft" placeholder="Soft style"></textarea>

<textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea>

<textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea>

Área de texto desativada

html 
1
2
3
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>

Área de texto com rótulo

html 
1
2
3
4
<label>
  <span>Your feedback</span>
  <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea>
</label>

Textarea com contagem de caracteres

html 
1
2
3
4
5
<label>
  <span>Write a message (max 200 characters)</span>
  <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea>
  <span>Characters remaining</span>
</label>

Editor de Markdown Avançado

Use markdown-text-editor para transformar qualquer área de texto em um editor de markdown completo. Dois modos estão disponíveis: simples (sintaxe Markdown bruta) e híbrido (renderiza a formatação ao vivo enquanto você digita). Para mais opções de configuração, consulte a documentação do plugin.

Modo Simples

Exibe a sintaxe bruta do Markdown. Os usuários escrevem Markdown diretamente na área de texto.

<textarea id="plain-markdown-editor" name="content"></textarea>

1
2
3
import MarkdownEditor from "markdown-text-editor";

new MarkdownEditor('#plain-markdown-editor');

Modo Híbrido

Renderiza a formatação enquanto você digita – negrito, títulos, listas e muito mais aparecem com estilo embutido.

<textarea id="hybrid-markdown-editor" name="content"></textarea>

1
2
3
import MarkdownEditor from "markdown-text-editor";

new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' });

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Área de texto e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP