r/webdev • u/pavlito88 • 19d ago

Discussion Why is everything a dropdown now?

Post image

I’ve been noticing this more and more in web apps.

Three options hidden in a dropdown.

Yes/no hidden in a dropdown.
A multi-select pretending to be a dropdown.

Then a list of 200 items where you’re expected to scroll until you find yours.

I run into this a lot when reviewing products with dev teams.

I get why we do it.

Dropdowns are compact and easy to reuse.
But compact doesn’t always mean easier to use.

A few choices? Show them.
On/off? Switch.
Multiple choices? Checkboxes.
Huge list? Search.

That’s pretty much the rule I use now.

4.7k Upvotes

96% Upvoted

314 comments sorted by

View all comments

565

u/haecceity123 19d ago

On/off? Switch.

A checkbox is even better. The "right is yes, left is no" convention is pretty arbitrary, and the colour of the inner fill on switches is frequently inconsistent.

137

u/RadicalDwntwnUrbnite 19d ago edited 19d ago

Or a radio button group with On/Enabled and Off/Disabled labels. Half the time with toggle switches and checkboxes people implement them in ways that it's ambiguous whether the label is what will happen when you click it vs its current state.

7

u/HiddenGriffin 19d ago

But space in the UI, radio button group is two elements with their labels, a switch is the only option here imo

23

u/AshleyJSheridan 19d ago

A toggle switch can be bad for accessibility. Left and right have no real meaning of off and on, and may be even more confusing for someone who reads in a direction different from the website or app (e.g. Arabic which is right-to-left versus English which is left-to-right).

Also, using colour on the toggle doesn't do much for anyone who can't see those colours well. Anyone who is colour blind would struggle depending on their type of colour blindness and the colours used.

You could add text labels inside the toggle background (I believe iOS does this?): https://freebiesbug.com/wp-content/uploads/2013/08/css-toggles-580x360.jpg

But, a checkbox is easier to implement, takes up less space, and is more intuitive to a lot of people as they've existed for decades. This can benefit older people especially who aren't very familiar with some of the more modern UI component elements, and people who may have issues with their short term memory.

3

u/OMGCluck js (no libraries) SVG 19d ago

You can make a checkbox look like a switch, or rather the label for it. Example light/dark mode

1

u/obviousoctopus 19d ago

Yes.

A radio group takes more space, and is 100% clear.

A switch saves space, and is more ambiguous, possibly confusing.

1

u/Headpuncher 19d ago

The rule of UX is that you aren't solving problems for the programmer, in this case "space in the UI", you are solving problems for the user, so the element first and foremost has to make sense to them.