2

I have a a table with a column represent with a toggle. I need to let the customer an ability to select or deselect them all at once. Did someone tackle this use case?

I try some ideas, like toggle with 3 states or a dropdown with 2 radio button and clear option but nothing feel correct.

Thanks for any answer

enter image description here

1

2 Answers 2

2

The most common option is a "toggle all" switch, as shown in the figure below:

enter image description here

Nonetheless, I'd consider a checkbox with a "select / deselect all". Toggles have some usability issues, especially when they're a lot like in your case. Something like the following image

Insert image description here

Remember that with multiple selection scenarios, you've an indeterminate state (some options are selected, others aren't).

Enter image description here

In this case, you shouldn't use a toggle switch, because a toggle switch is for binary options (true/false), while checkboxes allow for tri-state scenarios.

5
  • Hi, Thanks for your answer. We must give on every raw the ability for boolean option, our customer can choose by himself what to active and what not. It's pretty confusing because you can active or deactivate, what happen if I choose with the master toggle "select all" and right after deselect one of the rows, do the master toggle become off because if so I expect when I choose deactivate it will deselect all option, so we need the middle state like "intermediate". It's tricky at toggle level because people less familiar with this pattern of 3 states.
    – Ronent
    Jul 18, 2022 at 18:26
  • That's exactly why I recommend NOT to use a toggle, but a checkbox. The Indeterminate checkbox state exists since Windows appeared , so there's a good chance users will understand it, after all it's just a visual cue (at code level, checkboxes and toggles are the same). With a toggle you'll always face the problem you mention because it doesn't have a tri-state like checkboxes, it's only true or false
    – Devin
    Jul 18, 2022 at 19:38
  • A third state for checkboxes isn’t common for all platforms. And for web content you will need to make it accessible in a non conventional way. By the way checkboxes and toggles define a state not an action and since “select all” is an action it should have a button. Same for “deselect all”. If it is requested to have an “all selected” state, the checkbox or toggle should follow the state of the list (uncheck it when one in the list gets unchecked and vice versa)
    – jazZRo
    Jul 19, 2022 at 7:27
  • @jazZRo I don't understand your comment. Third state (or tri-state) is a very common feature and it first came with Windows file archive back in early 90s, not ure what do you mean by "platform". Furthermore, this is an accepted UX pattern for web, if you do a search for "select all" you'll get thousands of images showing checkboxes. I don't understand this either "an action should have a button". There are countless actions without buttons (mobile gestures for starters). But the main part is: this is an accepted pattern. See material.io/components/checkboxes#usage for an easy example
    – Devin
    Jul 19, 2022 at 15:26
  • I don’t think a (Google) search is the best way to do research 😉 But you are right that the tri-state concept has been around for a long time and has been assumed a suitable solution since. It is not that common for many people anymore though, it’s usefulness is doubtful and it has it’s flaws (does it toggle everything on or off?). Buttons are indeed not the only way to perform actions. For this “toggle all” it seemed the most likely control.
    – jazZRo
    Jul 20, 2022 at 9:21
0

You can improve your search and filter options. If users want to deactivate and activate some profiles, allow them to search for those profiles instead of scrolling a lot in a list view. In the filter option, you can add a status filter where the user can see only active and deactive profiles. If a user wants to active or deactive multiple profiles, allow them to select multiple lists from the row and let them take the action.

Search and filter option

Active or activate profiles

Your Answer

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

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