Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de área de texto

Última actualización:

Área de texto CSS Tailwind solo CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de Textarea capturan entradas de texto de varias líneas de los usuarios, perfectos para mensajes, comentarios, descripciones y contenido de formato largo. Construidas con elementos de área de texto HTML nativos y mejoradas con el estilo CSS de Tailwind, las áreas de texto admiten múltiples tamaños, colores y estados. Accesibles y totalmente personalizables, se integran perfectamente en formularios e interfaces de comunicación.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
textareaBaseEntrada de texto de varias líneas con estilo
textarea-softEstiloFondo teñido apagado
textarea-ghostEstiloNo hay borde visible hasta que se enfoca
textarea-dashedEstiloEstilo de borde discontinuo
textarea-xsTamañoextrapequeño
textarea-smTamañoPequeño
textarea-mdTamañoMedio (predeterminado)
textarea-lgTamañoGrande
textarea-xlTamañoExtra grande
textarea-2xlTamaño2× extra grande
textarea-primaryColorBorde de color del tema principal
textarea-secondaryColorBorde de color del tema secundario
textarea-accentColorBorde de color del tema de acento
textarea-neutralColorBorde de color de tema neutro
textarea-infoColorBorde de color semántico de información
textarea-successColorBorde de color semántico de éxito.
textarea-warningColorBorde de color semántico de advertencia
textarea-errorColorBorde de color semántico de error

Uso básico

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

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

Tamaños 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>

Colores del á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 deshabilitada

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

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

Área de texto con etiqueta

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

Área de texto con recuento 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 rebajas avanzado

Utilice markdown-text-editor para convertir cualquier área de texto en un editor de rebajas completo. Hay dos modos disponibles: simple (sintaxis de Markdown sin formato) e híbrido (procesa el formato en vivo a medida que escribe). Para obtener más opciones de configuración, consulte los documentos del complemento.

Modo simple

Muestra la sintaxis de Markdown sin formato. Los usuarios escriben Markdown directamente en el á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

Muestra el formato en vivo a medida que escribe: negrita, encabezados, listas y más aparecen con estilos en línea.

<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 u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases área de texto según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP