Bileşenler

Switch

Bir ayarı anında etkili olacak şekilde açar ya da kapatır.

TasarımcıGeliştirici

Playground

Beni hatırla

Figma varyantı

👕 Size=Medium
🕹 State=Default
Active=True
Disabled=False
Error=False
Label (L)=False
Label (R)=True

OffOn

mediumlarge

Üzerine gelince kenarlık primary’ye döner, klavye odağı odak halkası ekler, hata kenarlığı kırmızı yapar, pasif durum kontrolü sadeleştirir.

ChoiceGroup, Form Checkbox / Radio / Switch desenidir: bir label, aralarında 16px olan seçenekler ve bir hint ya da hata.

State	Track	Border	Thumb
Off	`--color-surface-level-3`	—	`--color-on-primary`
Hover	`--color-primary-soft`	—	`--color-on-primary`
On	`--color-primary`	—	`--color-on-primary`
Error off / on	`--color-error-soft / --color-error`	—	`--color-on-error`
Disabled	`--color-surface-level-1`	`--color-surface-level-3`	`--color-surface-level-3`

Figma’da Switch için odak durumu yok; kodda odak halkası kullanılıyor.
Figma’da Hover + Active varyantı topu başa geri alıyor; kodda top sonda kalıyor.
Eski “Switch - Deprecated” setinde label boşluğu 12px; kod güncel seti izliyor (8px).

Figma	React
👕 Size = Medium / Large	`size='medium' / 'large'`
Active = True	`checked`
Label (L) / Label (R)	`label="…" labelPosition='start' / 'end'`
Error / Disabled	`error / disabled`
🕹 State = Hover	`:hover`
Form Switch	`<ChoiceGroup label hint>`