UIDex

What is the difference?

Checkbox vs Switch / Toggle

The difference is when the change takes effect. A checkbox collects a value that gets submitted with the rest of the form, so the user can still change their mind before saving. A switch applies immediately, with no confirmation step. The practical rule: if the screen has a save button, it is a checkbox. If it does not, it is a switch.

Ask yourself one question

If the user closed the page right now, would this choice already be saved?

تنبيهات الحساب

مسطرة المسافة تبدّل المربّع، و Enter يرسل النموذج.

RTLالمربّع عند بداية السطر، والتفريع يزيح بـ padding-inline-start

Checkbox

مربّع الاختيار
<input type="checkbox">

Use it when

Accepting terms, picking several categories, or any value that belongs to a form with a single submit button.

Full entry

الإعدادات

كل مفتاح يُطبَّق لحظة الضغط، ولا يوجد زرّ «حفظ» في هذه الشاشة.

RTLالقرص يسافر نحو النهاية المنطقية، فـ«مُفعّل» عند اليسار في العربية

Switch / Toggle

مفتاح التبديل
role="switch"

Use it when

A setting that applies at once: dark mode, notifications, background sync. The user sees the effect before lifting their finger.

Full entry

The classic mistake

A switch sitting next to a save button. The user flips it, leaves the page satisfied, and the setting is silently lost.

Other comparisons