---
title: "Radio"
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 Radio using native HTML inputs. Custom colors, sizes, and grouped sets for accessible, theme-aware single-choice form controls."
url: https://frutjam.com/id/components/radio
---

# Radio Component

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

## Ukuran Radio

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