Hot answers tagged

115 votes

Boolean switch with a third state

Here: You are creating a search-filter? Just add an option that means you don't care about this filter option. male | female | doesn't matter Other names: Any Either Everyone N/A (Not Applicable)...
theonlygusti's user avatar
  • 1,491
80 votes
Accepted

Boolean switch with a third state

If I understood correctly the premises of the question, what the user should decide is: If the user wants to consider (filter by) one of the following options If the answer to 1 is Yes, then choose ...
Alvaro's user avatar
  • 16.8k
67 votes
Accepted

Should a select all toggle button get activated when all toggles get manually selected?

I am not a fan of the approach you have suggested. I find that having a global toggle can be confusing. The reason for this is exactly why you are unsure and asking this question - because there are ...
musefan's user avatar
  • 7,061
56 votes
Accepted

How to indicate a checkbox/toggle is "always on"

Consider removing UI elements that have no function, and add labels to emphasize the options the user does have. For a simple form, there's a lot going on in this interface. Not only are you letting ...
Nathan Rabe's user avatar
  • 8,878
48 votes

Cookies - Should the toggles be on?

Simple answer, the law states that they must be off per default. Privacy by default: https://www.ics.ie/news/what-is-privacy-by-design-a-default Accept all/reject all buttons are a nice touch, go ...
Anders's user avatar
  • 1,086
45 votes
Accepted

Toggle states display

Material Design Shows the Locked State by a greyed-out version like this: But the problem here is the accessibility. Users with vision-related disabilities won't be able to differentiate these two. ...
Sooraj MV's user avatar
  • 3,599
35 votes

Mutually exclusive Switches

The way I see this is that you have two exclusive groups of options, it just happens that the second group only contains one option. Something as simple as the word 'or' will help a lot - that way it'...
Beejamin's user avatar
  • 982
32 votes
Accepted

Does an on/off switch still means on/off when positioned horizontally?

I think your assumption that vertical switches are always up=on and down=off is wrong. In instances where two switches control the same thing then it is very easy for them to get out of sync. For ...
musefan's user avatar
  • 7,061
29 votes

Boolean switch with a third state

What you're searching for is "both", "any" or "all" (in case you add more gender categories). All - Female - Male So that makes it clear that results from both (or all) genders will be included. And ...
Luciano's user avatar
  • 1,178
29 votes

Mutually exclusive Switches

Your constraints limit you to only four valid choices: A and B Only A Only B Only C I would just use a set of 4 radio buttons.
chepner's user avatar
  • 399
25 votes

Should a toggle button show its current state or the state to which it will change?

There's already 18 answers here so this might be late to the party, but it makes sense to use checkboxes in such situations. Some examples: And when selected: This is similar to the "dim / lit" ...
Pacerier's user avatar
  • 509
22 votes

Mutually exclusive Switches

What I understand from the question is that A, B, and C are independently selectable but selecting C disables A or B. What is the way to graphically show three selectors where one is linked to the ...
Danielillo's user avatar
  • 18.3k
21 votes
Accepted

Cookies - Should the toggles be on?

As the most highly voted answer is simply false I am writing this answer just clarify the legalities in the EU. Under GDPR there are 6 lawful bases for processing personal data. The two we care about ...
David Mulder's user avatar
  • 3,289
21 votes

Mutually exclusive Switches

Option 1 Note: this was the original answer before the question was updated (see comments). I think what you essentially have here is two groups. You have the "A and/or B" group, and you ...
musefan's user avatar
  • 7,061
20 votes

Toggle states display

While having a "faded" style for disabled controls is quite standard, the problem here is that the difference is too subtle for the user to clearly see. You could change the colour from ...
musefan's user avatar
  • 7,061
16 votes
Accepted

How to represent a switch "tabbed" state in Material Design?

Just use the style is recommended on Material design | Components– Selection controls | Switch
Madalina Taina's user avatar
14 votes

How to indicate a checkbox/toggle is "always on"

Since the enabled-disabled and required-optional fields are interdependent, why not combine them to make the concept of enabled implicit? Field | Disabled Optional Required --------------+---...
MTCoster's user avatar
  • 636
13 votes

Should a toggle switch's label be on its left or right?

Labels on either side serve different purposes. In reading order, Labels before the switch (on the left or top for LTR languages) indicate what the switch is for. Labels after the switch (on the ...
SNag's user avatar
  • 9,597
12 votes

What's the difference between a toggle switch, radio buttons and a tickbox? What's the best cases these patterns can be used?

Well, it kind of depends on which system you are. There are mobile guidelines for Android, iOS and Windows. iOS, for example, doesn't use regular checkboxes (they are not called tickbox btw) or radio ...
Big_Chair's user avatar
  • 6,816
12 votes

Boolean switch with a third state

How about adding a Third Radio button for the Third state?
Dipak's user avatar
  • 16.2k
12 votes

Boolean switch with a third state

In many situations, context is really really important, and it may be sensible to look at a consistent way to do all filters, and not just the male/ female one. As the question states: The form of ...
wintvelt's user avatar
  • 1,424
12 votes

Does an on/off switch still means on/off when positioned horizontally?

You're possibly using a two-state switch to control three states: Off | Auto | On "Activating the switch when the fan is on will turn it off, and vice versa." Like a lightswitch in a room ...
Izquierdo's user avatar
  • 12k
11 votes

Should a select all toggle button get activated when all toggles get manually selected?

Personally, I prefer to have it toggled on/off too, depending on the children state. At least with the design above, it makes sense to also change the 'parent' state, because should the user want to ...
margie's user avatar
  • 363
10 votes

Should a toggle button show its current state or the state to which it will change?

I would recommend watching the following video (from 1991!) which was seminal to the current design of the iOS toggle for instance: https://www.youtube.com/watch?v=wFWbdxicvK0 And corresponding paper:...
Riche Design's user avatar
10 votes
Accepted

What breakpoint width to switch to mobile menu?

Forget mobile breakpoints, there's no phone and tablet sizes outside marketing. Breakpoints should follow the content, not the screen size. As a simple example, let's consider the menu: Home | ...
fregante's user avatar
  • 373
10 votes
Accepted

Toggle Switch position the right way?

Avoid ambiguity The control should clearly tell the user where to click / swipe and what the result will be. Take these iOS toggles for example: In juxtaposition, a user can easily tell which ...
plainclothes's user avatar
  • 21.3k
10 votes
Accepted

Should I translate ON and OFF in a switch element?

While it depends on your demographics, I would say yes, you should translate it. It also depends on whether you are translating everything else. Having a translated control in the middle of other ...
Devin's user avatar
  • 37.3k
9 votes

Checkbox vs toggle

The implementation of the switch that you have show is not correct. Refer to the image attached.
Kaustav Mukhopadhyay's user avatar
9 votes

Boolean switch with a third state

For a selection which includes 'no choice', plus other, exclusive choices, a good old fashioned select box is great! In this specific case, it would allow you to have a default of "Don't filter", plus ...
Beejamin's user avatar
  • 982
9 votes

How to indicate a checkbox/toggle is "always on"

I've tried: grey (looks if they're off) and darker green (doesn't really communicate the functionality). You're absolutely right that making the toggle switches grey would look like they were 'off', ...
Jos van Weesel's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible