---
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/tr/components/radio
---

# Radio Component

Radyo düğmesi bileşenleri, kullanıcıların birbirini dışlayan bir dizi seçenek arasından tam olarak bir seçeneği seçmesine olanak tanır. Yerel HTML giriş öğeleriyle oluşturulmuş ve Tailwind CSS ile geliştirilmiş radyo düğmeleri birden çok boyutu, rengi ve durumu destekler. Erişilebilir ve klavyeyle gezinilebilen radyolar tercih seçimi, filtreleme ve tek seçmeli form soruları için idealdir.

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

## Temel Kullanım

## Radyo Boyutları

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

## Radyo Renkleri

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

## Engelli radyo

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

## Radyo Şekilleri

### Kare Radyo

```html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked">
```

### Yuvarlak veya Dairesel Radyo

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

## Etiketli radyo

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