Radio Component
CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Komponen tombol radio memungkinkan pengguna untuk memilih tepat satu pilihan dari serangkaian pilihan yang saling eksklusif. Dibuat dengan elemen masukan HTML asli dan disempurnakan dengan Tailwind CSS, tombol radio mendukung berbagai ukuran, warna, dan status. Dapat diakses dan dinavigasi dengan keyboard, radio ideal untuk pemilihan preferensi, pemfilteran, dan pertanyaan formulir pilihan tunggal.
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 |
|---|---|---|
| radio | Basis | Masukan tombol radio bergaya |
| radio-circle | Gaya | Radio melingkar penuh (default) |
| radio-rounded | Gaya | Radio agak bulat |
| radio-square | Gaya | Radio persegi tanpa pembulatan |
| radio-disabled | Pengubah | Tampilan non-input untuk elemen non-input |
| radio-xs | Ukuran | Sangat kecil |
| radio-sm | Ukuran | Kecil |
| radio-md | Ukuran | Sedang (standar) |
| radio-lg | Ukuran | Besar |
| radio-xl | Ukuran | Ekstra besar |
| radio-2xl | Ukuran | 2× ekstra besar |
| radio-primary | Warna | Warna tema utama |
| radio-secondary | Warna | Warna tema sekunder |
| radio-accent | Warna | Warna tema aksen |
| radio-neutral | Warna | Warna tema netral |
| radio-info | Warna | Info warna semantik |
| radio-success | Warna | Warna semantik sukses |
| radio-warning | Warna | Warna semantik peringatan |
| radio-error | Warna | Kesalahan warna semantik |
Penggunaan Dasar
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
Ukuran Radio
html
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
Warna Radio
html
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
Radio dinonaktifkan
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Bentuk Radio
Radio Persegi
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio Bulat atau Lingkaran
html
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
Radio dengan label
html
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |