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

Checkbox Component

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

Onay kutusu bileşenleri, kullanıcıların bir kümeden bir veya daha fazla seçeneği seçmesine olanak tanır. Yerel HTML giriş öğeleriyle oluşturulmuş ve Tailwind CSS ile geliştirilmiş onay kutuları birden çok boyutu, rengi ve durumu destekler. Klavye gezintisi ve ekran okuyucu desteğiyle tamamen erişilebilen onay kutuları, formlarda, filtre seçeneklerinde ve izin yönetimi arayüzlerinde sorunsuz bir şekilde çalışır.

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
checkboxTemelStillendirilmiş onay kutusu girişi
checkbox-circleStilTamamen dairesel onay kutusu
checkbox-roundedStilOrta derecede yuvarlatılmış onay kutusu
checkbox-squareStilYuvarlama içermeyen kare onay kutusu
checkbox-disabledDeğiştiriciGiriş dışı öğeler için devre dışı bırakılmış görünüm
checkbox-xsBoyutEkstra küçük
checkbox-smBoyutKüçük
checkbox-mdBoyutOrta (varsayılan)
checkbox-lgBoyutBüyük
checkbox-xlBoyutEkstra büyük
checkbox-2xlBoyut2× ekstra büyük
checkbox-primaryRenkBirincil tema rengi
checkbox-secondaryRenkİkincil tema rengi
checkbox-accentRenkVurgu teması rengi
checkbox-neutralRenkNötr tema rengi
checkbox-infoRenkBilgi anlamsal rengi
checkbox-successRenkBaşarı anlamsal rengi
checkbox-warningRenkUyarı anlamsal rengi
checkbox-errorRenkHata anlamsal rengi

Temel Kullanım

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Onay Kutusu Boyutları

html 
1
2
3
4
5
6
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">

Onay Kutusu Renkleri

html 
1
2
3
4
5
6
7
8
9
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Devre Dışı Onay Kutuları

html 
1
2
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Onay Kutusu Şekilleri

Kare Onay Kutusu

html 
<input type="checkbox" class="checkbox checkbox-square" checked="checked">

Daire / Yuvarlak Onay Kutusu

checkbox-circle ve checkbox-rounded sınıflarının her ikisi de aynı görsel stille sonuçlanır ve esnek adlandırma kurallarına olanak tanır.

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Etiketli Onay Kutuları

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>