---
title: "Textarea"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Textarea using native HTML elements. Custom sizes, error states, and label integration for accessible multi-line form input fields."
url: https://frutjam.com/pl/components/textarea
---

# Textarea Component

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                                                          |
| ------------------ | ------- | ------------------------------------------------------------- |
| textarea           | Opierać | Stylowe, wielowierszowe wprowadzanie tekstu                   |
| textarea-soft      | Styl    | Stonowane przyciemnione tło                                   |
| textarea-ghost     | Styl    | Brak widocznej granicy, dopóki nie zostanie ustawiona ostrość |
| textarea-dashed    | Styl    | Styl przerywanej granicy                                      |
| textarea-xs        | Rozmiar | Bardzo mały                                                   |
| textarea-sm        | Rozmiar | Mały                                                          |
| textarea-md        | Rozmiar | Średni (domyślny)                                             |
| textarea-lg        | Rozmiar | Duży                                                          |
| textarea-xl        | Rozmiar | Bardzo duży                                                   |
| textarea-2xl       | Rozmiar | 2× bardzo duże                                                |
| textarea-primary   | Kolor   | Obramowanie koloru podstawowego motywu                        |
| textarea-secondary | Kolor   | Ramka koloru motywu dodatkowego                               |
| textarea-accent    | Kolor   | Obramowanie koloru motywu akcentującego                       |
| textarea-neutral   | Kolor   | Neutralna granica koloru motywu                               |
| textarea-info      | Kolor   | Informacje semantyczne obramowanie koloru                     |
| textarea-success   | Kolor   | Sukces semantycznej granicy koloru                            |
| textarea-warning   | Kolor   | Ostrzeżenie semantyczna granica koloru                        |
| textarea-error     | Kolor   | Błąd semantycznego obramowania koloru                         |

## Podstawowe użycie

## Rozmiary obszaru tekstowego

```html
<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
<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
<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
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

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

## Obszar tekstowy z etykietą

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

## Obszar tekstowy z liczbą znaków

```html
<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](https://frutjam.com/plugins/markdown-editor).

### Tryb zwykły

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

### Tryb hybrydowy

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