Bileşenler

Toggle

Basılı kalan iki durumlu buton; bir ayarı açar ya da kapatır.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Toggle, Base UI Toggle ile çizilen yerel bir <button> öğesidir ve basılı durumunu aria-pressed ile bildirir. Yalnızca ikonlu Toggle’da label tip düzeyinde zorunludur ve aria-label olarak verilir.

Klavye

Tuş	Davranış
Tab	Toggle’a odaklanır; devre dışıysa atlar.
Enter, Space	Basılı durumu değiştirir.

ToggleGroup içinde ok tuşları da kullanılır; ToggleGroup erişilebilirlik sekmesine bakın.

Odak

Klavyeyle odaklanınca 2 px color-focus-ring halkası kutunun 2 px dışında görünür (focus-visible).

Ekran okuyucu

Örnek	Okunan
`<Toggle icon="bold" label="Kalın" />`	“Kalın, aç/kapat düğmesi, basılı değil”
Basıldıktan sonra	“Kalın, aç/kapat düğmesi, basılı”

Kontrast

Basılı durum yalnızca renge dayanmaz: dolgu ve kenarlık birlikte değişir. color-border-selected kenarlığı zeminde en az 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	Toggle nasıl karşılar	Ürün ekibi ne yapmalı
1.4.1 Renk kullanımı	Basılı durum dolgu ve kenarlıkla gösterilir.	`className` ile kenarlığı kaldırmayın.
1.4.11 Metin dışı kontrast	Seçili kenarlık 3:1.	Marka token’larını değiştirirken çifti denetleyin.
4.1.2 Ad, rol, değer	`aria-pressed` ve ad.	Etiketi duruma göre değiştirmeyin.
2.5.8 Hedef boyutu (asgari)	En küçük kutu 32 × 32 px.	Toggle’lar arasında boşluk bırakın.