4

I'm designing a web app that has forms where the user can turn features on and off with switches. When certain features are turned on, the form displays additional fields/controls that provide additional customization options. The user has to submit the form for changes to take effect.

I'm unsure if switches are the best option in this case, or if checkboxes are a better choice.

enter image description here

Research

According to this NNgroup article...

When presenting the user with a binary option that requires confirmation, best practice is to use a single checkbox. Example: A newsletter opt-in/opt-out checkbox.

When presenting the user with a binary option that has an immediate effect, best practice is to use a switch. Example: Enabling a setting or preference in an app.

Grey Area?

This situation seems to fall into a grey area. On one hand, switches seem appropriate because there's an immediate effect in the interface (e.g., additional fields are shown). On the other hand, checkboxes seem appropriate because the user needs to submit the form for the changes to take effect.

Real World Examples

Google Forms uses checkboxes for this type of progressive disclosure.

enter image description here

Other sites I've seen use switches. I don't have an example at the moment, but there are plenty of sites that recommend using switches in this exact case, like this one: https://learnwoo.com/common-design-mistakes-myths-checkboxes-toggle-switches/

Question

When revealing additional fields in a form that users need to submit, is it better to use switches or checkboxes? Are best practices in this case platform specific?

Improve this question

1 Answer 1

Reset to default
1

Material Design recommends using switches for one item, not dependant or conditional items combined with the binary choice. And, as you stated above, it's reserved for an immediate effect, not a submission.

enter image description here

Microsoft also has specific guidelines around switches vs. checkboxes

  • Use a toggle switch for binary settings when changes become effective immediately after the user changes them.
  • Use check boxes for optional ("nice to have") items.
  • Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box.
  • Use check boxes when the user can select multiple items that are related to a single setting or feature.

When in doubt, it's best to bias towards the most widely encountered options, since these are patterns used by a huge set of users, and users come to your application with patterns they are already familiar with.

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.