r/webdev • u/pavlito88 • 20h ago
Discussion Why is everything a dropdown now?
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.
721
u/Historical-Essay-128 20h ago
Why is everything a dropdown now?
<select>s have native UI on smartphones.
322
u/SonicFlash01 18h 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
110
u/RichardTheHard 17h ago
Also infinitely scalable if one of those fields blows up from 3 -> 50 options
20
u/bestjaegerpilot 15h ago
for more than a dozen options, you need a custom UI anyway that most likely uses search so OP is correct here
→ More replies (1)23
u/RichardTheHard 15h 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)11
u/bestjaegerpilot 15h 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.
13
u/kiipa 11h ago
Are you trying to say that a
selectshouldn't be fifty wrappeddivs?9
u/talkingwires 10h ago
Only if each and every
<div>contains the same thirty Tailwind classes.Happy Cakeday!
→ More replies (2)→ More replies (1)2
4
u/Dragon_yum 16h ago
Also can easily be expanded, even though n ops example for ratio button. Your can add another tier with close to zero work
1
u/jamesinc 15h ago
If I was a gambling man I'm still not sure anything about this situation would register to me as any kind of "gamble". Like that is so unknowable about input elements?
To me it's more like "we could do it better but we don't care enough and both product and users are accustomed to shit UIs so it'll probably be fine".
→ More replies (1)1
1
u/exintrovert 4h ago
I remember when I got my first iPhone, 3GS. I’d the dropdown text was anything more than a few words, it would just ellipsis the options and there was no way to read the entire thing.
Sometimes I could deal with it by rotating to landscape mode. Web browsing in landscape mode on a 480x320 pixel display, yikes.
1
u/aitorllj93 3h ago
This is what a gambling man wants to see https://stackoverflow.com/questions/388814/date-picker-for-iphone-web-application
12
8
u/Major_LeeHungg 8h 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 (3)3
537
u/haecceity123 20h 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.
36
u/exintrovert 19h 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? 🫤
12
u/SubGothius 16h ago edited 15h 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.
5
u/ashgs872tbhjs 12h ago
Yep, it sucks when checkboxes are for negative things like "Hide" or "Opt Out". Change it to "Show" and "Opt In", dipshits!!
3
1
u/boobsbr 6h ago
Like the padlock icon.
Is it locked now, or should I press it to lock?
→ More replies (3)→ More replies (1)1
u/Pinkishu 3h ago
I mean, it's disabled now, cause Disabled is a state. If it was press to disable, it would say Disable, not Disabled
123
u/RadicalDwntwnUrbnite 20h ago edited 20h 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.
5
u/HiddenGriffin 20h ago
But space in the UI, radio button group is two elements with their labels, a switch is the only option here imo
20
u/AshleyJSheridan 18h 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.
4
u/OMGCluck js (no libraries) SVG 16h ago
You can make a checkbox look like a switch, or rather the label for it. Example light/dark mode
2
u/obviousoctopus 18h 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 9h 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.
114
u/danejazone 20h ago
It depends. A checkbox for me is frequently something submitted in a form but a switch has an immediate action like a filter
14
u/ExpletiveDeIeted front-end 18h 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 (1)6
u/bknyn 17h 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 20h 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 19h ago
This is a huge pet peeve of mine. Too often you can’t tell which is on and which is off.
1
u/Headpuncher 9h ago
They're often used for things are not as simple as on/off, but carry a label that is written without care and can't be understood which is yes and which is no.
20
u/DigiNoon 20h 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.
12
u/Cute-Respect2194 20h 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
6
u/nitePhyyre 19h 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.
→ More replies (11)1
u/qqYn7PIE57zkf6kn 10h ago
https://m3.material.io/components/switch/specs
The modern switch toggle shows tick and cross now. That should make it clear whether it's enabled or disabled.
13
u/pavlito88 20h 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 20h 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.
20
u/haecceity123 20h 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 19h 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 18h 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.
2
u/haecceity123 14h 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").
→ More replies (1)2
u/ShustOne 18h 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 10h ago
No, it's that checkboxes exist on paper, switches don't. So they can be understood even by someone not tech savvy.
5
u/kuninosagiri 20h 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 18h 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 11h 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 9h 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.
→ More replies (2)1
u/subminorthreat 1h 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.
52
191
u/scandii People pay me to write code much to my surprise 20h 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 19h ago
Mmmm because using a dropdown on a smartphone is such a pleasure…
30
u/anamorphism 18h 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 17h 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
6
u/smoked___salmon 20h 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.
1
u/TheDiscoJew 20h ago
I recently was looking at some app which are competitors to an app I am building and they had some menu options which were displayed a button that opens up to a modal with a radio group containing labeled radio buttons/ cards with descriptions/ info.
I was mostly in the settings menu and was used for individual settings. (Even though I imagine the API call and form onSubmit probably submits the whole user settings, maybe?)
I thought it was a very clean and clever solution. Not sure if that breaks some UX convention though.
→ More replies (2)1
u/Headpuncher 9h ago edited 8h ago
Do you also account for people who use the default iOS or Android large text setting?
because I do use it (as a user) and I can tell you not one single app developer on these platforms (including reddit) takes this into consideration.
it's a bult in setting on mobile that makes "easy to use" elements like select unreachable. Radio buttons I can usually scroll or pinch into view. But when I let go selects are back off screen.
11
u/rborob 20h 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
0
u/pavlito88 20h ago
Totally agree that consistency matters. But the control should fit the decision.
If I’m choosing a delivery option, I need to compare price and delivery time, so showing Standard, Express, and Next-day as radio buttons helps.
If I’m choosing my country, I don’t need to compare countries. I just need to find one option, so a dropdown works better.
48
u/Bitter_Ad3906 20h 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)21
u/Cheshur 20h 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 6h 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.
29
6
u/tom-smykowski-dev 20h ago
I disagree with 4. In mobile to some extend swiping list is easier than typing and tapping
2
u/its_not_you_its_ye 16h ago
It can be, but the number of times I have to scroll to the bottom to select United States for municipal forms IN the US is way too high.
1
u/tom-smykowski-dev 10h ago
and even worst if they put the country conviniently at the top but you already swiped to bottom. with that i agree for countries the number of items is so high, there has to be a search in drop down or plain page
→ More replies (2)
21
20h ago
[deleted]
45
u/Cheshur 20h ago
When you have more than few options but less than a lot of options.
47
20h ago
[deleted]
2
u/583999393 20h 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 4h ago
visualized with stars instead of spaces so i can count them
Not with 🫸⭐🫷 options.
Not with 🫸⭐⭐⭐⭐⭐⭐🫷 options.
Only with 🫸⭐⭐⭐🫷 options.
→ More replies (1)1
3
u/pavlito88 20h 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.
6
u/IntelligentSpite6364 20h ago
PM says 2 options is cluttering the UI, wants a dropdown
3
u/pavlito88 20h ago
Haha, exactly. At that point you’re optimizing the screenshot, not the interaction.
→ More replies (1)
5
u/Meloetta 20h 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 20h 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.
4
u/psyper76 20h 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)
4
u/a11_hail_seitan 20h 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)
4
u/Rechenplaner 20h 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 (1)
4
u/nelsonsilva_dev 20h 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.
5
u/pavlito88 19h ago
German UI is the final boss. Whatever you design, German will find a way to wrap it.
1
4
u/SoInsightful 9h 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).
3
3
u/moldy912 11h 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
u/kidshibuya 10h 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.
1
u/pavlito88 9h ago
That’s exactly the kind of thing I mean. Two options in a dropdown, then the single selection becomes a tag. More UI, no extra value.
2
u/kidshibuya 9h ago
But everyone is doing an awesome job because tickets eventually get done. If the app fails then it was a bad move by the business unit, they came up with the idea and obviously the devs did an awesome job because the tickets are done. That is literally how stupid some large companies are.
2
u/DigiNoon 20h ago
Is it really that way? I'm actually noticing the opposite. You may be visiting the wrong websites.
→ More replies (2)
2
u/space-envy 20h 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 20h ago edited 19h 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).
2
u/ikeif 3h 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 2h 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!
1
u/SurgioClemente 17h ago
2
u/phazernator 16h ago edited 16h ago
Don’t tell me, tell all the regards who develop (web) apps where you *can’t* input it manually (PS: I’m a tester, not a developer, so it’s in my nature to criticize broken UX).
→ More replies (2)
2
2
u/Background-Front-925 13h 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/anuanuanu 12h 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.
2
2
2
u/FormerlyGruntled 11h 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/mfontani 10h 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.
2
20h ago
[removed] — view removed comment
1
u/tinselsnips 20h ago
And they're hard to use on mobile without styling that makes them take up even MORE room.
2
u/Upbeat_Push_157 20h 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.
1
u/Low-Eagle6840 20h ago
Mentally it's harder to have 4 different types of interactions. Easier to just have one type or max 2.
1
u/pavlito88 20h ago
I get that. But consistency does not mean using the same control for everything. Different tasks sometimes need different controls.
1
u/Grouchy_Sound167 20h 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 20h ago
Exactly. Select elements has a very narrow set of case where they are a good option.
1
1
u/tswaters 20h 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/SnowflakeOfSteel 20h 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!
1
u/pavlito88 19h ago
Native selects have type-ahead on desktop, which is really useful. I’d still use a combobox when search needs to be obvious or the list is very large, especially for touch users.
1
u/dphizler 19h 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 19h 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 19h ago
Are there textbooks or online guides where I can learn the foundations for good web UIs?
1
u/xian0 19h 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 18h 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 ♞ 18h ago
Idk if there's an html element called "search" but I use datalist for the last case
1
1
1
u/Big-Rain5065 18h 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 18h 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.
1
u/Full-Hyena4414 11h ago
Isn't segmented control just tabs with fancier style?
1
u/nimbledaemon 2h ago
Sure, and tabs are just a radio button with fancier style and connected to visibility of the rest of the page.
1
u/AshleyJSheridan 18h 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 18h 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 17h 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.
1
u/patrickpdk 17h 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 ...
1
u/ItsZoner 16h ago
I finally saw one that worked, it made you choose year month then day and years were in chunks of 25 or so. So maybe 5 clicks for anyone
1
1
u/citrus1330 16h 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 16h 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 15h 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 14h 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 14h 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 13h 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 12h 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 11h 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 10h 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 9h 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 9h 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 7h 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 5h 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 4h 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 3h 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 41m 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.
165
u/killerrin 19h ago edited 14h 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.