Bileşenler
Radio
Kısa bir listeden tam olarak bir seçenek seçtirir.
Playground
Figma varyantı
🕹 State=Default
👕 Size=Medium
Checked=True
with Text=True
Error=False
Disabled=FalseVaryantlar
Boyutlar
Durumlar
Üzerine gelince kenarlık primary’ye döner, klavye odağı odak halkası ekler, hata kenarlığı kırmızı yapar, pasif durum kontrolü sadeleştirir.
Form içinde
ChoiceGroup, Form Checkbox / Radio / Switch desenidir: bir label, aralarında 16px olan seçenekler ve bir hint ya da hata.
Tokenlar
| State | Fill | Border | Mark |
|---|---|---|---|
| Off | --color-surface-level-1 | --color-foreground-medium-emphasis | |
| Hover | --color-surface-level-1 | --color-primary | |
| On | --color-primary | — | --color-on-primary + --shadow-depth-md |
| Error | --color-surface-level-1 | --color-error | |
| Disabled | --color-surface-level-3 | --color-surface-level-4 | --color-foreground-low-emphasis |
Figma notları
- Figma’da Radio için odak durumu yok; klavye kullanıcıları görebilsin diye kodda Checkbox’ın odak halkası kullanılıyor.
- Figma’daki hata varyantında Label Type=Hint (nötr bir hint) var; kodda Checkbox’taki gibi hata Hint’i gösteriliyor.
Figma’dan koda
| Figma | React |
|---|---|
| 👕 Size = Medium / Small | size='medium' / 'small' |
| Checked = True | checked |
| with Text = True | label="…" |
| Error / Disabled | error / disabled |
| Fluid = True | fluid |
| Form Spacing = True | spacing |
| Form Radio Button | <ChoiceGroup label hint> |