Bileşenler
Checkbox
Bir seçeneği açar ya da kapatır; tek başına ya da birden çok seçimin yapılabildiği bir listede. “Bazıları seçili” için belirsiz durumu destekler.
Playground
Figma varyantı
🕹 State=Default
Size=Medium
Checked=False
with Label=True
Error=False
Disabled=False
Indeterminate=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-surface-level-4 | |
| Hover / Focus | --color-surface-level-1 | --color-primary (+ --shadow-focus-primary) | |
| On / Indeterminate | --color-primary | — | --color-on-primary |
| Error | --color-surface-level-1 | --color-error (+ --shadow-focus-error) | |
| Disabled off / on | --color-surface-level-2 / --color-primary-tint | --color-surface-level-4 |
Figma notları
- 6px köşe Figma’da ham değer; kodda --radius-checkbox olarak eklendi.
Figma’dan koda
| Figma | React |
|---|---|
| Size = Medium / Small | size='medium' / 'small' |
| Checked / Indeterminate | checked / indeterminate |
| with Label = True | label="…" |
| Error / Disabled | error / disabled |
| 🕹 State = Hover / Focus | :hover / :focus-visible |
| Form Spacing = True | spacing |
| Form Checkbox | <ChoiceGroup label hint> |