Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Textarea Component

CSS-only Tailwind CSS textarea with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty Textarea przechwytują wieloliniowy tekst wprowadzany przez użytkowników, co doskonale sprawdza się w przypadku wiadomości, komentarzy, opisów i długich treści. Zbudowane z natywnych elementów obszaru tekstowego HTML i ulepszone stylami CSS Tailwind, obszary tekstowe obsługują wiele rozmiarów, kolorów i stanów. Dostępne i w pełni konfigurowalne, płynnie integrują się z formularzami i interfejsami komunikacyjnymi.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
textareaOpieraćStylowe, wielowierszowe wprowadzanie tekstu
textarea-softStylStonowane przyciemnione tło
textarea-ghostStylBrak widocznej granicy, dopóki nie zostanie ustawiona ostrość
textarea-dashedStylStyl przerywanej granicy
textarea-xsRozmiarBardzo mały
textarea-smRozmiarMały
textarea-mdRozmiarŚredni (domyślny)
textarea-lgRozmiarDuży
textarea-xlRozmiarBardzo duży
textarea-2xlRozmiar2× bardzo duże
textarea-primaryKolorObramowanie koloru podstawowego motywu
textarea-secondaryKolorRamka koloru motywu dodatkowego
textarea-accentKolorObramowanie koloru motywu akcentującego
textarea-neutralKolorNeutralna granica koloru motywu
textarea-infoKolorInformacje semantyczne obramowanie koloru
textarea-successKolorSukces semantycznej granicy koloru
textarea-warningKolorOstrzeżenie semantyczna granica koloru
textarea-errorKolorBłąd semantycznego obramowania koloru

Podstawowe użycie

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

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

Rozmiary obszaru tekstowego

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>

Kolory obszaru tekstowego

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>

Style obszaru tekstowego

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>

Wyłączony obszar tekstowy

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

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

Obszar tekstowy z etykietą

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

Obszar tekstowy z liczbą znaków

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>

Zaawansowany edytor Markdown

Użyj markdown-text-editor, aby zamienić dowolny obszar tekstowy w pełny edytor przecen. Dostępne są dwa tryby: zwykły (surowa składnia Markdown) i hybrydowy (renderuje formatowanie na żywo podczas pisania). Więcej opcji konfiguracji znajdziesz w dokumentacji wtyczek.

Tryb zwykły

Wyświetla surową składnię Markdown. Użytkownicy piszą Markdown bezpośrednio w obszarze tekstowym.

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

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

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

Tryb hybrydowy

Renderuje formatowanie na żywo podczas pisania — pogrubienie, nagłówki, listy i inne elementy są wyświetlane w formie wbudowanej.

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

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

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