---
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/tr/components/textarea
---

# Textarea Component

Textarea bileşenleri kullanıcılardan gelen çok satırlı metin girişini yakalar; mesajlar, yorumlar, açıklamalar ve uzun biçimli içerik için mükemmeldir. Yerel HTML textarea öğeleriyle oluşturulan ve Tailwind CSS stiliyle geliştirilen textarea'ler birden fazla boyutu, rengi ve durumu destekler. Erişilebilir ve tamamen özelleştirilebilirler; formlara ve iletişim arayüzlerine sorunsuz bir şekilde entegre olurlar.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf              | Tip   | Tanım                                    |
| ------------------ | ----- | ---------------------------------------- |
| textarea           | Temel | Stilize edilmiş çok satırlı metin girişi |
| textarea-soft      | Stil  | Sessiz renkli arka plan                  |
| textarea-ghost     | Stil  | Odaklanana kadar görünür kenarlık yok    |
| textarea-dashed    | Stil  | Kesikli kenarlık stili                   |
| textarea-xs        | Boyut | Ekstra küçük                             |
| textarea-sm        | Boyut | Küçük                                    |
| textarea-md        | Boyut | Orta (varsayılan)                        |
| textarea-lg        | Boyut | Büyük                                    |
| textarea-xl        | Boyut | Ekstra büyük                             |
| textarea-2xl       | Boyut | 2× ekstra büyük                          |
| textarea-primary   | Renk  | Birincil tema renk sınırı                |
| textarea-secondary | Renk  | İkincil tema renk sınırı                 |
| textarea-accent    | Renk  | Vurgu teması renk sınırı                 |
| textarea-neutral   | Renk  | Nötr tema renkli kenarlık                |
| textarea-info      | Renk  | Bilgi anlamsal renk sınırı               |
| textarea-success   | Renk  | Başarı anlamsal renk sınırı              |
| textarea-warning   | Renk  | Uyarı anlamsal renk sınırı               |
| textarea-error     | Renk  | Hata anlamsal renk sınırı                |

## Temel Kullanım

## Metin Alanı Boyutları

```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>
```

## Metin Alanı Renkleri

```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>
```

## Metin Alanı Stilleri

```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>
```

## Devre Dışı Metin Alanı

```html
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

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

## Etiketli Metin Alanı

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

## Karakter Sayımı ile Textarea

```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>
```

## Gelişmiş İşaretleme Düzenleyicisi

Herhangi bir metin alanını tam bir işaretleme düzenleyicisine dönüştürmek için `markdown-text-editor`'ü kullanın.
 İki mod mevcuttur: **düz** (ham Markdown sözdizimi) ve **karma** (biçimlendirmeyi siz yazdıkça canlı olarak işler).
 Daha fazla yapılandırma seçeneği için [eklenti belgelerine](https://frutjam.com/plugins/markdown-editor) bakın.

### Düz Mod

Ham Markdown sözdizimini görüntüler. Kullanıcılar Markdown'ı doğrudan metin alanına yazar.

### Hibrit Mod

Siz yazarken biçimlendirmeyi canlı olarak işler; kalın, başlıklar, listeler ve daha fazlası satır içi stilde görünür.