Radio

Küçük ve görünür bir seçenek kümesinden tam olarak birini seç. Radio native bir radio input'tur; RadioGroup ortak name değerini, seçili değeri ve ok tuşlarıyla gezinmeyi sağlar.

KararlıKaynak kod

ÜcretsizEkipİşletme

<RadioGroup aria-label="Paket" defaultValue="team">
<Radio value="free">Ücretsiz</Radio>
<Radio value="team">Ekip</Radio>
<Radio value="business">İşletme</Radio>
</RadioGroup>

Import

tsx

import { Radio, RadioGroup } from "@merid/react";

Örnekler

Controlled, açıklamalı

defaultValue grubu uncontrolled yapar. Controlled kullanım için value ve onValueChange ver; onValueChange yeni değeri string olarak alır. description, radio'ya bağlı ikinci bir satır ekler.

Standart3–5 iş günüHızlıSonraki iş günü

value: standard

const [value, setValue] = useState("standard");

<RadioGroup aria-label="Kargo" value={value} onValueChange={setValue}>
<Radio value="standard" description="3–5 iş günü">Standart</Radio>
<Radio value="express" description="Sonraki iş günü">Hızlı</Radio>
</RadioGroup>

Yatay

AylıkYıllık

<RadioGroup aria-label="Fatura dönemi" orientation="horizontal" defaultValue="monthly">
<Radio value="monthly">Aylık</Radio>
<Radio value="yearly">Yıllık</Radio>
</RadioGroup>

Grupta disabled tüm radio'ları devre dışı bırakır; tek bir Radio'da yalnızca o seçeneği devre dışı bırakır ve ok tuşları onu atlar. invalid, gruba aria-invalid ekler ve daireleri kırmızıya çevirir.

<RadioGroup aria-label="Devre dışı grup" disabled defaultValue="a">…</RadioGroup>

<RadioGroup aria-label="Beden" defaultValue="m">
<Radio value="s">Küçük</Radio>
<Radio value="m">Orta</Radio>
<Radio value="l" disabled>Büyük (tükendi)</Radio>
</RadioGroup>

<RadioGroup aria-label="Geçersiz grup" invalid required>
<Radio value="yes">Evet</Radio>
<Radio value="no">Hayır</Radio>
</RadioGroup>

API referansı

RadioGroup

role="radiogroup" olan bir div render'lar; ref ve diğer div attribute'ları bu elemana iletilir.

Prop	Tip	Varsayılan	Açıklama
`value`	`string`	–	Seçili değer (controlled).
`defaultValue`	`string`	–	Başlangıçta seçili değer (uncontrolled).
`onValueChange`	`(value: string) => void`	–	Seçim değiştiğinde yeni değerle çağrılır.
`name`	`string`	–	Tüm radio'ların paylaştığı form alanı adı. Verilmezse otomatik üretilir.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Yerleşim yönü.
`disabled`	`boolean`	`false`	Gruptaki tüm radio'ları devre dışı bırakır. `Field` içindeyse ondan devralınır.
`required`	`boolean`	`false`	Grubu form doğrulaması için zorunlu yapar. `Field` içindeyse ondan devralınır.
`invalid`	`boolean`	`false`	Grubu geçersiz olarak işaretler (`aria-invalid`; grupta ve her input'ta `data-invalid`). `Field` içindeyse onun `error` değerinden türetilir.
`children`	`ReactNode`	–	Radio elemanları.

Radio

Ref ve native input attribute'ları <input>'a, className ve style ise dış sarmalayıcıya gider.

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Form ile gönderilen ve RadioGroup.onValueChange'e iletilen değer.
`children`	`ReactNode`	–	Dairenin yanındaki görünür etiket.
`description`	`ReactNode`	–	Etiketin altındaki ikinci satır, aria-describedby ile bağlanır.
`disabled`	`boolean`	–	Bu radio'yu devre dışı bırakır. Varsayılanı grubun disabled değeridir.

Stil verme

Seçici	Değerler
`.mrd-radio-group`	Grup kapsayıcısı; `data-orientation` = `vertical` · `horizontal`
`.mrd-radio`	Radio sarmalayıcısı; devre dışıyken `data-disabled`
`.mrd-radio__control`, `__input`, `__circle`	Native input ve çizilen dairesi
`.mrd-radio__text`, `__label`, `__description`	Etiket kolonu
`data-invalid`	Grupta ve her input'ta; daireleri geçersiz stilde gösterir

Radio'nun component değişkeni yoktur.

Erişilebilirlik

Grubun role="radiogroup" rolü vardır. Ona aria-label ile ya da görünür bir başlığı gösteren aria-labelledby ile ad ver. Field içindeyse adını Field etiketinden alır; açıklamasını, hatasını, zorunlu ve devre dışı state'ini de devralır.
Grup tek bir Tab durağıdır: Tab seçili radio'ya (hiçbiri seçili değilse ilkine) gelir.
Ok tuşları focus'u ve seçimi birlikte taşır, uçlarda başa ya da sona döner; devre dışı radio'lar atlanır. Sağdan sola (RTL) yerleşimde Sol/Sağ yer değiştirir.

Tuş	Ne yapar
`Tab`	Focus'u gruba, seçili radio'ya taşır.
`↓→`	Sonraki etkin radio'yu seçer, sondan ilkine döner.
`↑←`	Önceki etkin radio'yu seçer, baştan sonuncuya döner.
`Home`	İlk etkin radio'yu seçer.
`End`	Son etkin radio'yu seçer.
`Space`	Focus'taki radio seçili değilse onu seçer.

Kullanım ilkeleri

Yap

Radio'ları, insanların yan yana karşılaştırması gereken iki ile altı seçenek için, mantıklı bir varsayılan seçiliyken kullan.

Kaçın

Uzun listeler için radio kullanmak (bunun için NativeSelect var) ya da tek bir evet/hayır için kullanmak (o bir checkbox işi).

İlgili sayfalar

SegmentedControl: görünüm değiştirmek için kompakt tekli seçim.
Checkbox: birbirinden bağımsız seçimler.
NativeSelect: çok sayıda seçenek.