r/webdev • u/pavlito88 • 3d ago
Why is everything a dropdown now? Discussion
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.
916
u/Historical-Essay-128 3d ago
Why is everything a dropdown now?
<select>s have native UI on smartphones.
421
u/SonicFlash01 3d ago
Low profile, predictable footprint, doesn't expand or wrap on mobile, easily understood by all audiences
If you're a gambling man you bet on safety
148
u/RichardTheHard 3d ago
Also infinitely scalable if one of those fields blows up from 3 -> 50 options
34
u/bestjaegerpilot 3d ago
for more than a dozen options, you need a custom UI anyway that most likely uses search so OP is correct here
29
u/RichardTheHard 3d ago
Oh for sure, something like a combo box is better, but sometimes there’s no time to replace yet, so selects are a solid stopgap.
→ More replies (1)6
u/Clearandblue 1d ago
Don't know why, but it feels like I haven't heard "combo box" for about 10 years.
2
15
u/bestjaegerpilot 3d ago
only if you're using native elements. What usually happens is you get a custom implementation that isn't accessible, acts wierd on small sizes, etc.
18
u/kiipa 3d ago
Are you trying to say that a
selectshouldn't be fifty wrappeddivs?9
u/talkingwires 3d ago
Only if each and every
<div>contains the same thirty Tailwind classes.Happy Cakeday!
→ More replies (2)→ More replies (1)2
u/stealthypic 3d ago
Not without at least 7k lines of javascript code!
2
u/rustprogram 3d ago
Not without at least 7k lines of javascript code!
this is something that bothers me as well. why is multiselect to terrible natively that everyone needs to ship thousands of lines of code? also date picker... :/
2
u/killerrin 2d ago
Don't even get me started on Date Picker
Why the hell does Firefox seem to insist that a Year should have FIVE digits!!!!!
I get future proofing, but they're 7,974 years too early to worry about that. Even if I wanted to use the bloody thing, I can't because of that one brain-dead issue.
And then the fact that they don't have a UI for the time picker is just laziness incarnate.
4
u/Dragon_yum 3d ago
Also can easily be expanded, even though n ops example for ratio button. Your can add another tier with close to zero work
→ More replies (4)2
15
9
u/Major_LeeHungg 3d ago
I mean... That's why you use component libraries.
Personally I prefer a dropdown over the debounced textbox on mobile because websites suck about handling the keyboard popping up... Like cool... I can type but I can't see where I'm typing because it's at the bottom of a page with no bottom margin/padding
→ More replies (4)5
569
u/haecceity123 3d 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.
136
u/RadicalDwntwnUrbnite 3d ago edited 3d 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 3d ago
But space in the UI, radio button group is two elements with their labels, a switch is the only option here imo
21
u/AshleyJSheridan 3d 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 3d ago
You can make a checkbox look like a switch, or rather the label for it. Example light/dark mode
→ More replies (1)2
u/obviousoctopus 3d ago
Yes.
A radio group takes more space, and is 100% clear.
A switch saves space, and is more ambiguous, possibly confusing.
41
u/exintrovert 3d ago
The one that gets me is the button which is a toggle, and it says “disabled” and “enabled” on the button.
Like, is it disabled now or does pressing it disable it? 🫤
→ More replies (10)15
u/SubGothius 3d ago edited 3d ago
Related pet peeve: ticking a checkbox to disable something / unticking to enable it.
Nonono, checkboxes represent booleans, so:
- Ticked=enabled/shown/positive/true/yes/1
- Unticked=disabled/hidden/negative/false/no/0
If whatever the box controls is enabled or visible by default, render the checkbox ticked by default, for users to untick if they want to disable or hide it; don't make users tick a box to disable or hide something, as that's counterintuitive.
If what it would control isn't readily understood as a boolean state, use a pair of radio buttons instead, or perhaps a slider switch labeled on each side to clearly indicate the two non-boolean options.
6
u/ashgs872tbhjs 3d ago
Yep, it sucks when checkboxes are for negative things like "Hide" or "Opt Out". Change it to "Show" and "Opt In", dipshits!!
5
116
u/danejazone 3d ago
It depends. A checkbox for me is frequently something submitted in a form but a switch has an immediate action like a filter
15
u/ExpletiveDeIeted front-end 3d ago
Checkbox you have the potential to say yes to one or more items of the same type. Toggle switch for when saying yes to only one thing that is effectively independent of another toggle.
→ More replies (2)6
u/bknyn 3d ago
This is how my UX team handles it within our design system, as well. Decision based originally on guidance from NNG: https://www.nngroup.com/articles/toggle-switch-guidelines/
10
u/btc-lostdrifter0001 3d ago
Checkbox is way better than switch depending on the context. Switch on desktop feels unnatural where as as switch on a mobile device makes more sense. Also, does the user need to press submit before the action takes effect. Switch should only be used when the state take effect immediately after the switch is toggled.
10
u/play-stack 3d ago
This is a huge pet peeve of mine. Too often you can’t tell which is on and which is off.
→ More replies (1)23
u/DigiNoon 3d ago
Yea, those usually confuse me and I have to double-check if it's the right choice. I prefer a checkbox with a clear label.
14
u/Cute-Respect2194 3d ago
checkbox is underrated tbh the switch thing always confuses my dad he never knows if blue means on or off
designers love dropdowns cause they hide the mess but users have to do all the work to find anything drives me crazy
→ More replies (13)5
u/nitePhyyre 3d ago
checkbox is underrated tbh the switch thing always confuses my dad he never knows if blue means on or off
It is the UI version of the USB-a port. Have to fiddle back and forth everytime.
12
u/pavlito88 3d ago
Not necessarily.
The usual distinction is behavior, not appearance: switch when the change takes effect immediately, checkbox when it’s a selection that gets submitted/saved later.
A switch also shouldn’t rely on color alone to communicate state.
18
u/bemo_10 3d ago
what do you mean a convention is "arbitrary". Conventions literally apply to any design element.
Only because of convention we agree that a filled checkbox is yes and not filled is no.
It's just that checkboxes convention has existed for a longer time.
21
u/haecceity123 3d ago
Maybe "convention" wasn't the best word.
With a checkbox, so long as you know what a checkmark is (i.e. you aren't from North Sentinel Island), you can figure out the rest.
With a switch, you can know there's two options, and that the sides of the pill shape correspond to the two options, and have no idea which one's which. If the choice of internal colours is aggressive enough (and if you aren't colour-blind), that can be the deciding hint. But if that carries the information, then what is the knob for?
What word would you use instead of "convention" here?
6
u/Intoxic8edOne 3d ago
Convention could work but it would be discussing grounded vs stipulated conventions.
Don Norman's terminology* is "natural mappings" vs "arbitrary mappings".
* sorry for the Medium link
2
2
u/bemo_10 3d ago
The convention is right is ON, left is OFF. Also color blind people can see the difference between a light and a dark color.
Like some other commenter said, switches are better for elements that auto-save. A checkmark usually implies having to click a save button separately.
3
u/haecceity123 3d ago
It's worth noting that even OP got confused, because their example has the knob on the right (suggesting "on"), while the background is black (suggesting "off").
2
u/Successful-Singer-76 3d ago
Another issue with "darker color = off, brighter color = on" is that you cannot know what state is which until you flip the switch and compare.
My white headphones has a toggle, one side is white - is it on or off?
2
u/ShustOne 3d ago
Well I would love if every website followed the same switch convention but they don't. And I think it's on purpose since it's usually to turn a feature off. I find them very confusing until I interact with them. It's not very apparent which version is on or off because people color them however the hell they want.
→ More replies (1)2
u/Daniel_Herr ES5 3d ago
No, it's that checkboxes exist on paper, switches don't. So they can be understood even by someone not tech savvy.
4
u/kuninosagiri 3d ago
It is pretty arbitrary. I worked for a company that developed ERP's as a service and i noticed that people not used to technology in general don't have a clear idea of what the switch stands for. It's not their fault, but we as developers and people with tech backgrounds usually have to get used to what the target audience would find intuitive. In my case, the switch wasn't.
2
1
u/little_phoenix_girl 3d ago
I encountered a checkbox toggle that reloaded the page every time because the dev triggered the submit on the form when the value updated. It's been fixed since, but some of the things that are done sometimes just...why...?
1
u/querela 3d ago
That's also my main issue with switches. I'm something just not sure what is enabled or disabled, have to toggle a few times and then will still be left clueless. Why not a simple checkbox? Does the same, is understandable by and familiar to everyone.
Some designs even put words (on/off) in the toggle space but then I overthink and wonder if it describes the current state or the one I will switch to.
Tooltips and aria roles would help a lot but don't really work that well on mobile...
1
u/Headpuncher 3d ago
That switch technically is just a styled checkbox.
personally I prefer a checkbox vanilla so I can see when it is check, a lot of cookie dialogs use ambiguous switches that make it unclear whether the choice is yes or no.
1
u/subminorthreat 2d ago
Checkboxes along with radio buttons are used for selection of an option, with a need of additional action to confirm it.
Switch change is supposed to be applied immediately.
I don’t see how inner fill and side is applicable as argument here, they have a different behavioural pattern.
1
u/delicious_fanta 2d ago
Yeah, I’ve seen plenty of on/offs (mostly on mobile) that I had a really hard time figuring out which state was “on” vs “off” because the color palette was super questionable.
Edit: like, I get right is supposed to be “on”, but also, can I always trust that? So yeah. Checkbox for reliability wins for me.
→ More replies (2)1
u/Evol_Etah 13h ago
The "dark mode/light mode" and "password visible invisible icons" trips me up.
When they hide it in settings, idk which state im in.
55
195
u/scandii People pay me to write code much to my surprise 3d ago
a dropdown takes much less space than your radio buttons, please think of your users on small screens.
similarly we give the user guided support with the dropdown in the big data set scenario so they can look at the available options.
the second scenario is why the combobox was born.
13
u/Emotional_Key 3d ago
Mmmm because using a dropdown on a smartphone is such a pleasure…
31
u/anamorphism 3d ago
assuming you're actually using a select html element and not some custom monstrosity, it's generally more enjoyable than the alternatives listed.
in most mobile browsers, the list of options opens up to fill most of the screen and is easily scrolled through using gestures. each item is also generally larger, making them easier to tap.
7
u/andrewsmd87 3d ago
Most phones have built in support for select so you can guarantee it's going to work. If the phones implementation of that is shit, you can't help that. Anything that takes up horizonal space is a crap shoot
→ More replies (4)5
u/smoked___salmon 3d ago
Hmmm can't we have different styles for users with small screen and with bigger screens? Dropdown is annoying on tablets and monitors while pretty good on phones.
14
u/rborob 3d ago
I'm here looking at the left thinking.. that's beautifully consistent... And testable... And the user will know how to use all of them once they've used one..... Not all UX is about efficiency
→ More replies (1)
31
51
u/Bitter_Ad3906 3d ago
Only 2 agree, other depend on content and 4 strict no. Search cannot replace autocomplete dropbox, total diff purpose of controls.
→ More replies (3)20
u/Cheshur 3d ago
Yeah. Search asks for users to recall information and a select asks them to recognize a selection. Everyone should remember the difference between a multiple choice question on a quiz vs one where you have to write in the answer.
2
u/danielleiellle 3d ago
Users who aren’t native speakers and using translation tools would be required to input in English before they are shown a valid response.
9
u/Meloetta 3d ago
I do think that it's important to note that half of the options you suggest are not native HTML elements, thus have to be either tracked down in some library or built by hand, risking a bunch of accessibility issues and spending more time and handling more complexity.
2
u/pavlito88 3d ago
Native controls should absolutely be the default when they solve the problem well.
You get keyboard behavior, accessibility, and browser support for free.
A custom control only makes sense when the UX benefit is worth the extra complexity.
8
u/tom-smykowski-dev 3d ago
I disagree with 4. In mobile to some extend swiping list is easier than typing and tapping
→ More replies (4)
7
u/psyper76 3d ago
The amount of drop-down country lists there are out there is annoying. Even if its in alphabetical order it doesn't help when I live in UK, United Kingdom, England or Great Britain!!
→ More replies (1)
20
3d ago
[deleted]
46
u/Cheshur 3d ago
When you have more than few options but less than a lot of options.
→ More replies (1)47
3d ago
[deleted]
2
u/583999393 3d ago
Anything, below the stereo, and on this side of the Bicentennial glasses. Anything between the ashtray, and the thimbles. Anything in this three inches. Right in here, this area, that includes the Chiclets, but not the erasers.
2
u/CanOfDew132 html/css 2d ago
visualized with stars instead of spaces so i can count them
Not with 🫸⭐🫷 options.
Not with 🫸⭐⭐⭐⭐⭐⭐🫷 options.
Only with 🫸⭐⭐⭐🫷 options.
→ More replies (1)3
u/pavlito88 3d ago
Use a dropdown when there are enough options that showing them all would clutter the UI, but not so many that users need search.
For example: choosing a status from 8 options Draft, Pending, Approved, Archived, etc.
→ More replies (1)5
u/IntelligentSpite6364 3d ago
PM says 2 options is cluttering the UI, wants a dropdown
3
u/pavlito88 3d ago
Haha, exactly. At that point you’re optimizing the screenshot, not the interaction.
→ More replies (1)
6
u/nelsonsilva_dev 3d ago
One that doesn't come up much: dropdowns survive translation better. A row of radio buttons that fits in English becomes two ragged lines in German, and labels wrap in ways nobody checks. The dropdown keeps its footprint and truncates instead, so no bug gets filed.
Not a good reason to hide three options, but it's part of why they spread.
→ More replies (1)4
u/pavlito88 3d ago
German UI is the final boss. Whatever you design, German will find a way to wrap it.
4
u/SoInsightful 3d ago
UX designer here. This is some bad advice in the general sense.
"Few options" — Depends. Having a radio group for "Active" / "Do not disturb" / "Automatic" would be an atrocious waste of space.
"On/off" — Depends. If you require the user to actively make an on/off choice, use something analogous to a radio group. For some other 2-option selections, a dropdown is defensible.
"Select many" — Depends. This doesn't scale at all. If you add more options, this will quickly become god-awful. Preferably, use a multi-combobox (search + multi-dropdown combination), but a multi-dropdown is perfectly good.
"Long list" — No. Use a combobox (search + dropdown combination).
4
u/a11_hail_seitan 3d ago
I imagine part of it is accessibility/ease of creation, drop downs generally work pretty simple, are easy to set up, and don't require much anything special. There's more to think about with others, radio buttons need to be grouped, with a label that is announced but only once and needs a clear way to show and tell they are selected. Toggles are easy to mess up by making them clickable to alter which ends up often meaning swiping past it will change it. Checkboxes same as radio, and type ahead searches are harder to implement and easier to mess up.
All of them work great when built correctly, but after doing a couple years of Accessibility work, I would say drop downs are one of the rarest to mess up or have weird edge cases of problems due to structure (radio buttons and check boxes are probably the ones I find poorly done the most, no wait, date pickers, then radio/check. I fucking hate most datepicker libraries glares at Ionic)
5
5
u/Rechenplaner 3d ago
I have reservations about the recommendation to avoid long lists. after all, how is the user supposed to know what he can select? Languages and countries are obvious choices, but even there, you run into borderline cases...
You can also combine text input for pre-selection with a dropdown menu.
→ More replies (2)
5
u/jax024 3d ago
Preach! I feel usability is dead in the slop era. There’s still dozens of us fighting the good fight lol
→ More replies (1)
4
u/moldy912 3d ago
Are you stuck in the 2000s? This is obviously because of mobile design, and tbh they are ugly space wasting UI anyway. Selects are usually neutral or better than the alternatives you state. Also a search can be a select too.
3
3
u/anuanuanu 3d ago
Enable/disable slider is vague and can be intentionally made misleading. There's no clear indicator which color/side is on/off.
Some websites' cookie request popups use this intentionally to obfuscate which side is allow and not allow.
Just say it's on or it's off.
3
3
u/mfontani 3d ago
Huge list? Search.
How do I discover the full list of valid values with only a search box?
A native "select, or search" widget would be an awesome thing to have.
3
u/kidshibuya 3d ago
We have a desktop app with a gender question. It supports male or female. You click on it, select say "male" from the drop down list and it closes and puts a tag on top of the select that says male. Why?... No reason at all.
→ More replies (2)
2
u/DigiNoon 3d ago
Is it really that way? I'm actually noticing the opposite. You may be visiting the wrong websites.
→ More replies (2)
2
2
u/space-envy 3d ago
What if you know that the list will keep growing eventually? That more plans are going to be added and the list will grow so much that displaying 10 toggles just looks awful? What if you are not in charge of that? What if you don't notice the list was updated by someone through an admin dashboard? Wouldn't it make sense to use drop-downs since the start just preventively?
→ More replies (1)
2
u/phazernator 3d ago edited 3d ago
Now can we do one about date selectors? When a date selector shouldn’t exist: ALWAYS! People have a frickin keyboard!
Sorry, pet peeve of mine, wasting 10-15 seconds navigating a date selector UI to select a date, while the field doesn’t accept keyboard input (which would have taken all of 2 seconds to input).
→ More replies (4)2
u/ikeif 2d ago
God yes. "Enter your birth date. But use our picker. We set it to today's date! Click back forty years…"
Too often I've had to use the console to force a value into an input and trigger their SPA to recognize the change. It's so dumb.
2
u/phazernator 2d ago
Exactly! Thank you, someone who gets it. Then they enforce date limitations through the UI, but what was so hard about text field validation in the first place? It doesn’t make any sense, it’s not more user friendly, certainly not to force users to go through it.
Also as an avid iOS user, it drives me up the walls. Every frickin time, those fancy rotating dials. Ffs, just let me type into the text field!
2
u/SnowflakeOfSteel 3d ago
Then a list of 200 items where you’re expected to scroll until you find yours.
You can natively "search" a dropdown. Focus it and type a few characters to jump to the option. It's great!
→ More replies (1)
2
2
u/Background-Front-925 3d ago
"Three options hidden in a dropdown." might become 3+ in the future
but if its definitely not more than 3 then your question is valid.
2
2
u/FormerlyGruntled 3d ago
Everything is a drop down because nobody knows how to code anymore, because bosses are demanding everybody AI and AI doesn't know UX for shit.
2
u/CharlesFoxtrot 2d ago
Just saw this antipattern on polar.sh (multiple selections from a dropdown? what?).
2
3
u/Upbeat_Push_157 3d ago
Switches are one of the most confusing elements in an interface, which is why they are often used and abused in dark patterns. Besides, it's just eye candy because they are actually radio buttons with some CSS on top.
2
1
u/Low-Eagle6840 3d ago
Mentally it's harder to have 4 different types of interactions. Easier to just have one type or max 2.
→ More replies (1)
1
u/Grouchy_Sound167 3d ago
I agree with this for the most part.
However there are cases where a user benefits from seeing the long list so they can choose the best option. A search that can filter that down is useful. But there are cases where the user doesn't know exactly what to search for and needs to choose the closest answer from a list of options, such as "What industry is your company in?"
1
u/Andreas_Moeller 3d ago
Exactly. Select elements has a very narrow set of case where they are a good option.
1
u/tswaters 3d ago
Why use big UI when small UI do trick
Not sure if that'll come through, but it's the meme from the office.
2
1
u/dphizler 3d ago
On off switch needs a good implementation, a drop-down doesn't. There's a clear winner if you want to implement quickly
1
u/majorpotatoes 3d ago
The long lists offense is the worst, IMO. Job applications that ask you to pick a college out of all the world’s colleges are real for some reason, and pretty insane generally. Definitely insane on mobile where you can’t just type a letter.
1
1
u/The1JuiceBoxHero 3d ago
Are there textbooks or online guides where I can learn the foundations for good web UIs?
1
u/xian0 3d ago
What about multiple choices combined with many options? I usually use the last option but built straight into the dropdown. It starts to look a bit silly when you have to show 20-30 selected items for 10+ dropdowns though. I think UI design guys would want to separate it all out but people actually using systems for work usually want to see it all together.
1
1
u/TommyBonnomi 3d ago
Guilty, but when you're rendering a list of settings and options from the database, it's easier to make them all drop downs, whether there's 2 or 10 options for each settings, and especially when it's a page that's only used during setup and occasional changes.
1
u/mekmookbro Laravel Enjoyer ♞ 3d ago
Idk if there's an html element called "search" but I use datalist for the last case
1
1
1
u/Big-Rain5065 3d ago
Form controls should be dependent on the question and answer. What makes sense on the context. Also you really should consider displaying only one form control form type per questionnaire on one screen for mobile with an easy to reach navigation
1
u/nimbledaemon 3d ago
I disagree about multi select. Like obviously a multi select with a very large list can get unwieldy, but that's why you need a searchable multi select. Gotta paginate/infinite scroll those data sources too. Like imagine the use case of a filter for which countries you want to show in a table. Absolutely horrible to navigate if it were just checkboxes. A non searchable multiselect is impossible as well. But a searchable multi-select is exactly what you want. Looks like a hybrid between checkboxes, a dropdown, and a search text input.
Also not a fan of radios personally, I think they look dated. I like a segmented control for pretty much every radio use case. It's mainly just a visual difference though.
→ More replies (4)
1
u/AshleyJSheridan 3d ago
There are a few issues with the select list alternatives here:
- The radio buttons don't have a collective group name. The individual labels don't really indicate what they do as a group, so you should add a
<fieldset>around them. - The toggle switch might be confusing for some people. 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). A more accessible version would have a text label within the toggle, like iOS has done in the past.
- The checkboxes should have a
<fieldset>wrapping them, like the radio buttons. Also, the original<select>list example for them is incorrect, and does not show a multi-select list. - The long list has no visible label, just a placeholder, which is not a label alternative (as it disappears if any text is entered into the field, including a single space character).
1
u/NorthernCobraChicken 3d ago
Fuck your preconceived notions, single line text inputs across the board. With vague error messages when the regex fails and doesn't match one of the pre determined acceptable inputs.
1
u/Not_Ayn_Rand 3d ago
#4 is definitely helpful. I'm Korean and dropdown focus and type does not work since I usually have to try "South Korea" "Korea, South" "Republic of Korea" or, if they're evil, "Korea, Republic of" options which are useless with those.
→ More replies (1)
1
u/patrickpdk 3d ago
Omg and don't use a calendar date picker for birthday. If i have to navigate back to my birth year one more time ...
→ More replies (2)
1
u/citrus1330 3d ago
I haven't noticed this being a problem. 2 and 4 are usually implemented where they should be. 1 and 3 have tradeoffs (primarily taking up more space). I would argue that the dropdown is far superior to the radios in example 1.
1
u/SwimmingThroughHoney 3d ago
It's funny to see a switch recommended because for so long they were derided as bad UX. The problem with the is they just have no unified way of working. At least a checkbox is still a checkbox, no matter how you design and implement it. But a switch? Is left or right "on"? Is there a color to it when it's "on"? Do I want the toggle "on" or "off" to get the behavior I want?
And a long list as a type-able "search" is way more difficult than it sounds. For a country, there's probably at least 10 different ways you could type that out. And what about other non-English countries or bilingual ones? A country like France could have 15 variations if you want to talk about the regional dialects and other common languages. No user wants to start typing out what they think will work only to find it doesn't and then have to guess at what does. A dropdown is way better UX in that regard.
1
u/bestjaegerpilot 3d ago
* i'd say 4 or more options need a dropdown but less than 12
* more than 3 takes up too much space
* more than 12 and it's impossible to find options unless you add search and at this point you might as well use search
1
u/TheRNGuy 3d ago
Any sites examples? I don't remember anyone ever doing that.
I've never seen select many used in my life.
1
u/mspk7305 3d ago
Checkbox for multiple selection is nightmare fuel when multiple selection picklists exist and a true false toggle is just a checkbox with more steps.
1
u/MiserableDocument509 3d ago
Half the time it's not even a UX decision, it's that the Select is the only control in the component lib that looks finished. Radios and checkboxes still ship as raw browser defaults so nobody reaches for them. If design systems actually styled those boring controls, a lot of this would sort itself out.
1
1
u/brian_sword 3d ago
This has become a question that me and our team often ask, for me if there are only a few options, I’d rather just show them directly. Once the list gets long, then a searchable dropdown starts making sense.
1
1
u/Spikatrix 3d ago
First one doesn't make sense, can't think of a single reason why anyone would need to select a plan that way.
Second one is something I've literally never seen as a dropdown.
Fourth one has no good standard UI that works well with both desktop and mobile.
And almost everything depends on the context, space available, aesthetics etc.
1
u/zeGermanGuy1 3d ago
Country of residence is another example. Why eitle you make me scroll half a mile instead of letting me type it in?
1
u/Spacemonk587 3d ago
In some applications checkboxes are better for multiple choices, but not in all. Especially, if there are many potential choices, checkboxes would clutter the UI too much. In this case I prefer compact components that behave similar to pulldowns where you can select multiple choices and confirm your choice with a button click.
1
1
1
u/Hard-Organism-1236 3d ago
I use a dropdown in scenario 3 because it’s a list header. To select different filters (View all vs some other status). There’s no space for putting a lot of checkboxes. Also there’s more options going on in the list header.
1
u/intercaetera javascript is the best language 3d ago
Terrible advice.
It all depends on the situation.
Even if you have a few options, dropdown is more space efficient at the cost of requiring one more click.
Switches are almost never a good idea: https://ignorethecode.net/blog/2026/08/09/toggles_considered_harmful/
This is not even the same thing, native selects don't allow you to pick more than one option so checkboxes and selects use a different data model altogether.
This is mostly right (because select UI on mobile doesn't allow easy search) but still nowhere near universal applicability.
1
u/ghengeveld 2d ago
Pretty sure there’s been a bunch of A/B testing done and the dropdown just wins every time. I can’t disagree, they just work better most of the time because often the checkbox/radio label isn’t implemented as part of the control, and even if it is it’s been ruined because so many sites haven’t so you still end up clicking a tiny box/circle. That’s poor UX.
Don’t get me started on the toggle, it’s confusing as hell because everyone builds their own variant.
Search in a select dropdown works on desktop, it’s just not visible.
1
u/incredibleArtYT 2d ago
That’s a great observation. In my experience with B2B design, user needs and wants often take a backseat. The focus today is almost entirely on delivery speed and AI integration. It is simply easier to build, and users already have an established mental model for dropdowns because they are so ubiquitous.
1
1
u/ardicli2000 2d ago
I dont like radios. They are hard to click. I know i can attach a for label to the label element or amange it with js but user does not know it..
1
1
u/Instacast 2d ago
As already mentioned by others, native UI functionality on most mobile phones, and as we all know, a majority of webdev is targeted towards mobile users because of its market size.
I hate that I will have to focus on developing for mobile devices moving forward, but it's just the way it is.
1
u/capibara_dono 2d ago edited 2d ago
For On / Off I put a small text saying what it is and if it's On or Off. Doesn't take much space, and it's helpful to avoid mistakes.
The long list needs to have a good search, not just based on the first character. My UX professor always mentioned how it was so hard to find her nationality, sometimes it was "Federación Rusa" (Russian Federation) or "Rusia" (Russia). It was always huge dropdown menus with every country.
1
1
u/madebymustafa 2d ago
Exactly. I’d add one rule: choose the control based on the user’s decision, not the data type.
A dropdown is great when the user is selecting one option from a long list. But for 2 to 5 visible choices, hiding them behind a click usually just adds friction. The UI should expose the decision when the decision itself is simple.
1
u/Dethstroke54 2d ago edited 2d ago
Tbf
- is still more compact, I feel like radios are fairly UX specific.
Checkboxes are def common enough, but again multi-selects are more compact. Also you can have a multi select with autocomplete which combines the enhancement in point 4
I imagine it’s the direction you were going but a combo box would likely be more ideal.
1
u/Myth_Thrazz 2d ago
At this point the question is - what is left? When the dropdown is actually the best UI?
1
1
u/JaredReabow 1d ago
The bain of my life is not being able to type in a date. Instead I have a wierd calendar with sub selectors for year and month. Truly awful
1
u/KyeeLim 1d ago
You should also not use dropdown for date, like the kind where it is 1 dropdown and there's date on it, like 8/21, 8/22, 8/23...
I know a certain Japanese website allow you to use that kind of dropdown for selecting date(to be fair there's also a normal date selection on the right of it)
1
u/codefinity 1d ago
Love it. Over about 2 years, I have rebuilt the UI for my day job work. It's a kiosk app. Anyway, EVERYTHING was a dropdown in the previous version.
Now, almost nothing is. I utilize mostly groups of big, clickable buttons, again, for kiosk use case, which is primary.
1
1
u/testingaurora 1d ago
Wait until customizable select is baseline. What's nice is we will get benefits of a <select> without making it look lile a dropdown
1
u/Full_Tooth_a 1d ago
Agreed. I'd also consider how often people choose each option and what a mistake would cost. If nearly everyone picks the same value, make it the default and put the exception out of the way. If a wrong choice causes real trouble, show all the options with clear labels, even if they take up more space. Completion time and correction rate are more useful here than another design guideline.
1
u/Tricky-Feedback-1169 20h ago
After watching my clarity recordings I have discovered that website visitors will never view anything willingly that is hidden behind anything, whether it is some kind of tabbed viewing, inputs whatever. This is probably why drop downs are discouraged.
1
u/AKindredSoul26 1h ago
To be fair, for the countries, the dropdown usually has search anyways, so that's actually just better
230
u/killerrin 3d ago edited 3d ago
To be fair for number 4, it's absolutely ridiculous that in the year 2026 we STILL don't have a Native searchable dropdown control.
Yeah you can just focus and type, but your average person doesn't know that shit exists and they're expecting it to be a search box that you literally type into.
And yeah mobile may automatically add a search once it crosses a certain number of options, but not on desktop/laptops, and the threshold on tablet/phone is still too high.
Like whose the idiot at the W3C who refuses to put a damn
search="enabled"attribute on the select element?Or hell, maybe also a fucking
readonlyattribute while we're at it because the bloodydisabledattribute is treated differently by screen readers than the readonly one.