Skip to main content
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.

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
checkboxBasisMasukan kotak centang bergaya
checkbox-circleGayaKotak centang melingkar penuh
checkbox-roundedGayaKotak centang agak membulat
checkbox-squareGayaKotak centang persegi tanpa pembulatan
checkbox-disabledPengubahTampilan non-input untuk elemen non-input
checkbox-xsUkuranSangat kecil
checkbox-smUkuranKecil
checkbox-mdUkuranSedang (standar)
checkbox-lgUkuranBesar
checkbox-xlUkuranEkstra besar
checkbox-2xlUkuran2× ekstra besar
checkbox-primaryWarnaWarna tema utama
checkbox-secondaryWarnaWarna tema sekunder
checkbox-accentWarnaWarna tema aksen
checkbox-neutralWarnaWarna tema netral
checkbox-infoWarnaInfo warna semantik
checkbox-successWarnaWarna semantik sukses
checkbox-warningWarnaWarna semantik peringatan
checkbox-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

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

Ukuran Kotak Centang

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

Warna Kotak Centang

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

Kotak Centang Dinonaktifkan

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

Kotak Centang Dengan Label

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>