RadioGroup

Ne zaman kullanılır

RadioGroup, iki ile yaklaşık yedi arası birbirini dışlayan seçeneğin hepsinin görünmesi gerektiğinde kullanılır: teslimat yöntemi, görünüm tercihi, sıklık.

Ne zaman kullanılmaz

• Birden çok seçim için: CheckboxGroup kullanın.
• Uzun listeler için: Yedi seçeneği aşan listelerde Select kullanın.
• Hemen etki eden görünüm seçimi için: ToggleGroup kullanın.

Anatomi

Grup etiketi

Birinci seçenekSeçenek açıklaması burada yer alır.

İkinci seçenekSeçenek açıklaması burada yer alır.

AçıkKoyu

Kodu kopyala

import { Radio, RadioGroup } from '@bigbang/ui';

export default function WithDescriptions() {
  return (
    <RadioGroup label="Grup etiketi" defaultValue="one">
      <Radio value="one" label="Birinci seçenek" description="Seçenek açıklaması burada yer alır." />
      <Radio value="two" label="İkinci seçenek" description="Seçenek açıklaması burada yer alır." />
    </RadioGroup>
  );
}

1. Başlık: <legend>; label-md, gerektiğinde zorunluluk işareti.
2. Daire: 16 px (radio-size), tam yuvarlak.
3. Nokta: Seçili öğede 6 px, dairenin 3/8’i.
4. Etiket ve açıklama: body-md etiket, body-sm açıklama.
5. Hata: error; öğelerin altında.

Davranış

• Bir öğeyi seçmek önceki seçimi kaldırır; seçim yalnızca başka bir öğe seçilerek değişir.
• Etikete tıklamak da öğeyi seçer.
• Formla seçili değer name adıyla gönderilir.
• error gruba ve tüm öğelere geçersiz durumu verir.

Yönergeler

• Seçenekleri anlamlı bir sırayla verin; en olası seçenek başta olsun.
• Kullanıcının seçmeden ilerleyebileceği bir durumda varsayılan bir seçim verin.
• Seçimi geri almak gerekiyorsa “Hiçbiri” gibi açık bir seçenek ekleyin.

İçerik

• Başlık kısa bir ad öbeği ya da sorudur.
• Etiketler aynı dilbilgisel yapıdadır ve sonunda nokta yoktur.

Türkçe	İngilizce
Bir seçenek seçin.	Choose one option.
Devam etmek için bir seçenek seçin.	Choose an option to continue.

İlgili bileşenler

• CheckboxGroup: Birden çok seçim.
• Select: Uzun listeden tek seçim.
• ToggleGroup: Hemen etki eden tek seçim.