Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Input Component

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

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
inputTemelStillendirilmiş metin giriş alanı
input-outlineStilGörünür kenarlıklı şeffaf dolgu
input-softStilSessiz renkli arka plan
input-ghostStilOdaklanana kadar görünür kenarlık yok
input-dashedStilKesikli kenarlık stili
input-squareStilSınır yarıçapı yok
input-disabledDeğiştiriciGiriş dışı öğeler için devre dışı bırakılmış görünüm
input-xsBoyutEkstra küçük
input-smBoyutKüçük
input-mdBoyutOrta (varsayılan)
input-lgBoyutBüyük
input-xlBoyutEkstra büyük
input-2xlBoyut2× ekstra büyük
input-primaryRenkBirincil tema renk sınırı
input-secondaryRenkİkincil tema renk sınırı
input-accentRenkVurgu teması renk sınırı
input-neutralRenkNötr tema renkli kenarlık
input-infoRenkBilgi anlamsal renk sınırı
input-successRenkBaşarı anlamsal renk sınırı
input-warningRenkUyarı anlamsal renk sınırı
input-errorRenkHata anlamsal renk sınırı

Temel Kullanım

<input type="text" placeholder="Enter your text here" class="input">

<input type="text" placeholder="Enter your text here" className="input">

Giriş Boyutları

html 
1
2
3
4
5
6
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
<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 
1
2
3
4
<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 
1
2
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>

Etiketli Giriş

html 
1
2
3
4
5
6
7
8
9
<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>