---
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/id/components/checkbox
---

# Checkbox Component

Komponen kotak centang memungkinkan pengguna untuk memilih satu atau beberapa opsi dari serangkaian opsi. Dibuat dengan elemen masukan HTML asli dan disempurnakan dengan Tailwind CSS, kotak centang mendukung berbagai ukuran, warna, dan status. Dapat diakses sepenuhnya dengan navigasi keyboard dan dukungan pembaca layar, kotak centang berfungsi dengan lancar dalam formulir, opsi filter, dan antarmuka manajemen izin.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas              | Jenis    | Keterangan                                |
| ------------------ | -------- | ----------------------------------------- |
| checkbox           | Basis    | Masukan kotak centang bergaya             |
| checkbox-circle    | Gaya     | Kotak centang melingkar penuh             |
| checkbox-rounded   | Gaya     | Kotak centang agak membulat               |
| checkbox-square    | Gaya     | Kotak centang persegi tanpa pembulatan    |
| checkbox-disabled  | Pengubah | Tampilan non-input untuk elemen non-input |
| checkbox-xs        | Ukuran   | Sangat kecil                              |
| checkbox-sm        | Ukuran   | Kecil                                     |
| checkbox-md        | Ukuran   | Sedang (standar)                          |
| checkbox-lg        | Ukuran   | Besar                                     |
| checkbox-xl        | Ukuran   | Ekstra besar                              |
| checkbox-2xl       | Ukuran   | 2× ekstra besar                           |
| checkbox-primary   | Warna    | Warna tema utama                          |
| checkbox-secondary | Warna    | Warna tema sekunder                       |
| checkbox-accent    | Warna    | Warna tema aksen                          |
| checkbox-neutral   | Warna    | Warna tema netral                         |
| checkbox-info      | Warna    | Info warna semantik                       |
| checkbox-success   | Warna    | Warna semantik sukses                     |
| checkbox-warning   | Warna    | Warna semantik peringatan                 |
| checkbox-error     | Warna    | Kesalahan warna semantik                  |

## Penggunaan Dasar

## Ukuran Kotak Centang

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

## Warna Kotak Centang

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

## Kotak Centang Dinonaktifkan

```html
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">
```

## Bentuk Kotak Centang

### Kotak Centang Persegi

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

### Kotak Centang Lingkaran/Bulat

Kedua kelas `checkbox-circle` dan `checkbox-rounded` menghasilkan gaya visual yang sama, sehingga memungkinkan konvensi penamaan yang fleksibel.

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

## Kotak Centang Dengan Label

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