---
title: "Input"
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 Input with native HTML semantics. Labels, error states, icons, prefix/suffix, and multiple sizes for accessible, theme-aware form fields."
url: https://frutjam.com/tr/components/input
---

# Input Component

Giriş bileşenleri, metin alanları, e-posta, şifre ve diğer giriş türleri aracılığıyla kullanıcı verilerini yakalar. Frutjam giriş sistemi, birden fazla boyut, renk ve doğrulama durumu için Tailwind CSS stiliyle anlamsal HTML form kontrolleri sağlar. Erişilebilirlik ve yanıt verme davranışı için tasarlanan girdiler, form doğrulama kitaplıkları ve çerçeveleriyle sorunsuz bir şekilde bütünleşir.

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                                                |
| --------------- | ----------- | ---------------------------------------------------- |
| input           | Temel       | Stillendirilmiş metin giriş alanı                    |
| input-outline   | Stil        | Görünür kenarlıklı şeffaf dolgu                      |
| input-soft      | Stil        | Sessiz renkli arka plan                              |
| input-ghost     | Stil        | Odaklanana kadar görünür kenarlık yok                |
| input-dashed    | Stil        | Kesikli kenarlık stili                               |
| input-square    | Stil        | Sınır yarıçapı yok                                   |
| input-disabled  | Değiştirici | Giriş dışı öğeler için devre dışı bırakılmış görünüm |
| input-xs        | Boyut       | Ekstra küçük                                         |
| input-sm        | Boyut       | Küçük                                                |
| input-md        | Boyut       | Orta (varsayılan)                                    |
| input-lg        | Boyut       | Büyük                                                |
| input-xl        | Boyut       | Ekstra büyük                                         |
| input-2xl       | Boyut       | 2× ekstra büyük                                      |
| input-primary   | Renk        | Birincil tema renk sınırı                            |
| input-secondary | Renk        | İkincil tema renk sınırı                             |
| input-accent    | Renk        | Vurgu teması renk sınırı                             |
| input-neutral   | Renk        | Nötr tema renkli kenarlık                            |
| input-info      | Renk        | Bilgi anlamsal renk sınırı                           |
| input-success   | Renk        | Başarı anlamsal renk sınırı                          |
| input-warning   | Renk        | Uyarı anlamsal renk sınırı                           |
| input-error     | Renk        | Hata anlamsal renk sınırı                            |

## Temel Kullanım

## Giriş Boyutları

```html
<input type="text" class="input input-xs" placeholder="Xsmall">
<input type="text" class="input input-sm" placeholder="Small">
<input type="text" class="input input-md" placeholder="Medium">
<input type="text" class="input input-lg" placeholder="Large">
<input type="text" class="input input-xl" placeholder="Xlarge">
<input type="text" class="input input-2xl" placeholder="2XLarge">
```

## Giriş Renkleri

```html
<input type="text" class="input" placeholder="Default">
<input type="text" class="input input-primary" placeholder="Primary">
<input type="text" class="input input-secondary" placeholder="Secondary">
<input type="text" class="input input-accent" placeholder="Accent">
<input type="text" class="input input-neutral" placeholder="Neutral">
<input type="text" class="input input-info" placeholder="Info">
<input type="text" class="input input-success" placeholder="Success">
<input type="text" class="input input-warning" placeholder="Warning">
<input type="text" class="input input-error" placeholder="Error">
```

## Giriş Stilleri

```html
<input type="text" class="input" placeholder="Default">
<input type="text" class="input input-outline" placeholder="Outline">
<input type="text" class="input input-soft" placeholder="Soft">
<input type="text" class="input input-dashed" placeholder="Dashed">
<input type="text" class="input input-ghost" placeholder="Ghost">
```

## Giriş Meydanı

OTP veya PIN alanları gibi sabit genişlikli tek karakterli girişler için `giriş karesi`'ni kullanın.

```html
<input type="text" class="input input-square input-xs" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-sm" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-md" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-lg" maxlength="1" placeholder="0">
```

## Devre Dışı Giriş

```html
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>
```

## Etiketli Giriş

```html
<label>
  <span>Email address</span>
  <input type="email" class="input input-outline w-full" placeholder="you@example.com">
</label>

<label>
  <span>Password</span>
  <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password">
</label>
```