RadioGroup

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

RadioGroup.tsx

Storybook

RadioGroup · Playground

RadioGroup ve Radio, @bigbang/ui paketindedir. Radio yalnızca bir RadioGroup içinde çalışır.

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

<RadioGroup label="Grup etiketi" value={value} onValueChange={setValue}>
  <Radio value="one" label="Birinci seçenek" />
  <Radio value="two" label="İkinci seçenek" />
</RadioGroup>;

Özellikler

RadioGroup

labelZorunlu

Açıklama

Grubun sorusu ya da konusu; radyo grubunu adlandıran <legend> olarak çizilir.

Tür

string

description

Açıklama

Başlığın altındaki yardım metni; gruba aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde grup ve tüm öğeler geçersiz olur; mesaj yardım metninden sonra gruba bağlanır.

Tür

string

required

Açıklama

Bir öğe seçilmelidir: başlığa * ve görünmeyen "zorunlu" ya da "required" eklenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: required zorunlu grupları, optional diğerlerini "(isteğe bağlı)" ya da "(optional)" ile işaretler.

Tür

'required' | 'optional'

Varsayılan

'required'

value

Açıklama

Kontrollü kullanımda seçili öğenin değeri. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde seçili öğenin değeri.

Tür

string

onValueChange

Açıklama

Yeni seçilen öğenin değeriyle çağrılır.

Tür

(value: string) => void

name

Açıklama

Form gönderiminde kullanılan alan adı.

Tür

string

orientation

Açıklama

Öğeler alt alta ya da iki üç kısa seçenek için sarmalanan bir satırda.

Tür

'vertical' | 'horizontal'

Varsayılan

'vertical'

disabled

Açıklama

Tüm öğeleri devre dışı bırakır.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

childrenZorunlu

Açıklama

Her biri value taşıyan Radio bileşenleri.

Tür

ReactNode

Radio

labelZorunlu

Açıklama

Dairenin yanındaki görünür metin; radyo düğmesini adlandırır, tıklamak öğeyi seçer.

Tür

ReactNode

description

Açıklama

Etiketin altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

valueZorunlu

Açıklama

Öğenin değeri; öğe seçilince RadioGroup bu değeri bildirir.

Tür

string

disabled

Açıklama

Yalnızca bu öğeyi kapatır; diğerleri seçilebilir kalır.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

Veri öznitelikleri

• data-component="radio-group": kök <fieldset> üzerinde; data-component="radio": her öğenin kökünde.
• RadioGroup data-part: legend, description, items, error.
• Radio data-part: circle, indicator, label, description.
• data-invalid: error verildiğinde grupta. data-checked, data-unchecked, data-disabled: dairede, Base UI’dan.