---
title: "Checkbox"
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 Checkbox using native HTML inputs. Custom colors, sizes, indeterminate state, and full keyboard support for accessible multi-select forms."
url: https://frutjam.com/tr/components/checkbox
---

# Checkbox Component

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                                                |
| ------------------ | ----------- | ---------------------------------------------------- |
| checkbox           | Temel       | Stillendirilmiş onay kutusu girişi                   |
| checkbox-circle    | Stil        | Tamamen dairesel onay kutusu                         |
| checkbox-rounded   | Stil        | Orta derecede yuvarlatılmış onay kutusu              |
| checkbox-square    | Stil        | Yuvarlama içermeyen kare onay kutusu                 |
| checkbox-disabled  | Değiştirici | Giriş dışı öğeler için devre dışı bırakılmış görünüm |
| checkbox-xs        | Boyut       | Ekstra küçük                                         |
| checkbox-sm        | Boyut       | Küçük                                                |
| checkbox-md        | Boyut       | Orta (varsayılan)                                    |
| checkbox-lg        | Boyut       | Büyük                                                |
| checkbox-xl        | Boyut       | Ekstra büyük                                         |
| checkbox-2xl       | Boyut       | 2× ekstra büyük                                      |
| checkbox-primary   | Renk        | Birincil tema rengi                                  |
| checkbox-secondary | Renk        | İkincil tema rengi                                   |
| checkbox-accent    | Renk        | Vurgu teması rengi                                   |
| checkbox-neutral   | Renk        | Nötr tema rengi                                      |
| checkbox-info      | Renk        | Bilgi anlamsal rengi                                 |
| checkbox-success   | Renk        | Başarı anlamsal rengi                                |
| checkbox-warning   | Renk        | Uyarı anlamsal rengi                                 |
| checkbox-error     | Renk        | Hata anlamsal rengi                                  |

## Temel Kullanım

## Onay Kutusu Boyutları

```html
<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
<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
<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
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">
```

## Etiketli Onay Kutuları

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