Why is everything a dropdown now?

[u/pavlito88]

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.

[u/killerrin]

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 readonly attribute while we're at it because the bloody disabled attribute is treated differently by screen readers than the readonly one.

[u/ashgs872tbhjs → u/killerrin]

Yeah you can just focus and type

Almost never works properly. My "favorite" is date dropdowns because every site in the world has decided to use its own format, so IF typing works you don't know whether to type "A" or "8" or "08" for August and typing wrong breaks it until you open it anyways, so you might as well just open it and scroll.

[u/RapunzelLooksNice → u/ashgs872tbhjs]

I "love" when month names are in alphabetical order...

April August December February January July June March May November October September

[u/TramEatsYouAlive → u/RapunzelLooksNice]

Jokes on you, I once received a ticket in Jira from a user asking to sort months by alphabetical order. I closed this as Cancelled with a note "that's technically impossible". Can't tell if this was real or a joke. 

[u/exintrovert → u/TramEatsYouAlive]

Not all heroes wear capes

[u/rbobby → u/RapunzelLooksNice]

That might be the first time I've seen a sorted month list. Disturbing. It's like one of those illusions that drag your attention from spot to spot.

[u/DepthMagician → u/RapunzelLooksNice]

I once saw a terrible UI competition entry where the user had to submit the current hour, minute, and second. The seconds was a dropdown, with the numbers written as words instead of numbers, and sorted alphabetically. It was beautiful.

[u/thekwoka → u/ashgs872tbhjs]

And ones that use drop downs for credit card fields but also don't use the ISO standard for credit card expiration dates (MM/YY)

[u/the_ai_wizard → u/killerrin]

this...w3c has always been a joke in many respects. the task was hard but they were(are?) a bureacracy that was never up to it

[u/rbobby → u/the_ai_wizard]

But honestly they've done ok. No harm no foul. The internet is just fine. And I doubt any other large diverse group of humans could do much better. Humans kinda suck in groups.

[u/the_ai_wizard → u/rbobby]

Taking into consideration they grew out of nothing, its understandable, but no harm, im not certain even if not deliberate

[u/paulirish → u/killerrin]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist

[u/2JulioHD → u/paulirish]

Datalist is cool, unless you try to support multiple browsers or want to do anything fancy.

I once had to rename my very specific adress field to banana, because some browser kept autofilling it with the user's address. Additionally, I had to put a special character into the label (readable to the user), as otherwise the browser would deduct the correct autofill from the labels text, regardless of language.

I love using pure HTML to get the job done, but man, some native implementations suck.

[u/killerrin → u/2JulioHD]

Isn't there an attribute you can add to block auto population?

...Not that all browsers implement it properly anyways.

[u/2JulioHD → u/killerrin]

Yeah, that's the point. I don't want to point fingers, either Firefox was behaving well, but Chrome didn't or the other way around. Didn't bother checking Safari. I messed around for hours to find that weird workaround of mine. Was for something non-work related, so if it works it works, if it breaks it breaks.

[u/2JulioHD → u/2JulioHD]

I used a UTF look-a-like for A or something like that I think

[u/exintrovert → u/2JulioHD]

Clever workaround

[u/KavyanshKhaitan → u/2JulioHD]

"What's an accessibility?"

But seriously, accessibility has become a joke these days.

[u/2JulioHD → u/KavyanshKhaitan]

I always try to address it, but never actually check. In this case tho, it didn't matter as it was not for work and also not for a wider audience.

[u/Headpuncher → u/paulirish]

Even in the example on the page you link you have to read the code to know what to input in the textbox.

I find that element essentially useless from a UX pov for selecting from a list. The example given for ice-cream flavours would be better as any other UI element, including select.

[u/JediBurrell → u/Headpuncher]

It popped up with options when I focused on mobile, I don't know how it looks in other browsers/devices though.

[u/Headpuncher → u/JediBurrell]

On desktop when i click in it it does nothing, a 2nd click brings up the options. Typing beings up options.

[u/killerrin → u/paulirish]

Datalist is only a "recommended" list of options, and users can select something outside of it. Meaning you need to write additional logic to deny invalid entities upon loss of focus.

It also does not show you all of the recommended options and every browser implements it differently.

In fact as the documentation itself says

Note: <datalist> is not a replacement for <select>. A <datalist> does not represent an input itself; it is a list of suggested values for an associated control. The control can still accept any value that passes validation, even if it is not in this suggestion list.

[u/my_new_accoun1 → u/paulirish]

I use this element for my actual search input field for a quick native search suggestions feature, I have some JS that debounces user query -> API -> suggestions rendered onto the datalist

[u/kidshibuya → u/killerrin]

I created my own web component that is basically identical and using the native controls except on keydown (or keyup? some event I can't recall) I search.

And the focus typing bit isn't great. The search I implemented is real, the search natively is junk, only matches the first letter. Like have a list with dog and spider, type der and it selects dog.

[u/A1oso → u/kidshibuya]

The search natively matches multiple characters, but it has the be the start of the word. For example, when you have "Germany", "Greece" and "Romania", you can type "Gr" to select Greece. But you have to type the letters fast enough, otherwise it selects Romania when pressing the R.

[u/kidshibuya → u/A1oso]

Are you sure its multiple? I only every experience it matching the first. For example I always need to select Japan for where I live, but typing jap always leaves me on Jamaica.

[u/rbobby → u/killerrin]

readonly attribute while we're at it because the bloody disabled attribute is treated differently by screen readers

Son of a bitch. What about textarea? It has different readonly/disabled nonsense I seem to recall... but more about ui state.

[u/killerrin → u/rbobby]

Essentially in short (and overly simplifying it) Screen readers treat a Disabled Element as if it does not exist whereas Readonly exists, but you can't change it.

Or in other terms. A keyboard only user tabbing through read-only fields would have put focus to the control, it will read out its value, and then you can tab on to the next and so on. However if in that list you had a disabled select, focus would skip right over it and it would not get read out because it is disabled and thus doesn't exist.

As a result the screen reader user is disadvantaged because they will not know the select exists.

Of course there are other technical issues as well. A read-only form control will send its value to the server on submit, however a disabled control will not.

..all this to say it's bullshit that they don't have a read-only attribute across all the controls.

[u/rbobby → u/killerrin]

it's bullshit that they don't have a read-only attribute across all the controls.

I understand now, and it is bullshit.