مفتاح تبديل

Switch

مفتاح تبديل متاح الوصول في React لإعداد ثنائي واحد يسري فوراً، مع تسمية ونص مساعد وحالات. مبني على Radix ومعكوس في الاتجاه من اليمين إلى اليسار.

متى تستخدمه

استخدم Switch لإعداد يسري لحظة تغييره: تشغيل الإشعارات وإيقافها، الوضع الداكن، أو إظهار العناصر المؤرشفة. إذا كان الخيار يحفظ عند إرسال النموذج، استخدم Checkbox. يوحي Switch بنتيجة فورية.

اجعل التسمية اسم الإعداد نفسه: "تنبيهات البريد" أوضح من "تشغيل/إيقاف".

أمثلة

مفتاح إعداد

تفعيل الإشعارات

مفعل افتراضياً، مع تلميح

الاشتراك في النشرة البريدية

يرسل إشعاراً عند وصول بريد جديد.

الحالات

المصادقة الثنائية

وضع الصيانة

مشاركة الموقع

هذا مطلوب للمتابعة.

تسمية عربية

تفعيل الإشعارات

الخصائص

الخصائص التي يعرفها Switch. سمات العنصر الأصلي تمر كما هي.

الخاصية	النوع	الوصف
`label`	`react.ReactNode`	Visible label, sits beside the track, associated via `htmlFor`/`id`.
`helperText`	`react.ReactNode`	Hint shown below the row. Hidden while an error message is showing.
`errorMessage`	`react.ReactNode`	Message shown below the row when `error` is true.
`error`	`boolean`	Marks the field invalid: sets `aria-invalid` and error styling.
`asChild`	`boolean`
`checked`	`boolean`
`defaultChecked`	`boolean`
`required`	`boolean`
`onCheckedChange`	`(checked: boolean) => void`

إمكانية الوصول

يعرض Switch الدور role="switch" مع aria-checked، لذا يعلنه قارئ الشاشة مفتاح تبديل ويقرأ حالته. يبدله مفتاح Space. ترتبط التسمية بالمفتاح، لذا يعمل النقر عليها أيضاً.

يتحرك المقبض مع اتجاه القراءة، لذا يقع موضع التشغيل في نهاية السطر في الاتجاه من اليمين إلى اليسار. يحمل موضع المقبض الحالة إلى جانب اللون.