Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS radyo düğmeleri. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
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
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"> |
Radyo Boyutları
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"> |
Radyo Renkleri
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"> |
Engelli radyo
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Radyo Şekilleri
Kare Radyo
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Yuvarlak veya Dairesel Radyo
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"> |
Etiketli radyo
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> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Radyo sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.