Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

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.

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
radioTemelTarz radyo düğmesi girişi
radio-circleStilTamamen dairesel radyo (varsayılan)
radio-roundedStilOrta derecede yuvarlak radyo
radio-squareStilYuvarlamasız kare radyo
radio-disabledDeğiştiriciGiriş dışı öğeler için devre dışı bırakılmış görünüm
radio-xsBoyutEkstra küçük
radio-smBoyutKüçük
radio-mdBoyutOrta (varsayılan)
radio-lgBoyutBüyük
radio-xlBoyutEkstra büyük
radio-2xlBoyut2× ekstra büyük
radio-primaryRenkBirincil tema rengi
radio-secondaryRenkİkincil tema rengi
radio-accentRenkVurgu teması rengi
radio-neutralRenkNötr tema rengi
radio-infoRenkBilgi anlamsal rengi
radio-successRenkBaşarı anlamsal rengi
radio-warningRenkUyarı anlamsal rengi
radio-errorRenkHata 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ı

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

Radyo Renkleri

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

Engelli radyo

html 
1
2
<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 
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

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>