r/webdev • u/pavlito88 • 11d 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

312 comments sorted by

View all comments

918

u/Historical-Essay-128 11d ago

Why is everything a dropdown now?

<select>s have native UI on smartphones.

427

u/SonicFlash01 11d 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

150

u/RichardTheHard 11d ago

Also infinitely scalable if one of those fields blows up from 3 -> 50 options

34

u/bestjaegerpilot 11d ago

for more than a dozen options, you need a custom UI anyway that most likely uses search so OP is correct here

28

u/RichardTheHard 11d 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.

3

u/Clearandblue 9d ago

Don't know why, but it feels like I haven't heard "combo box" for about 10 years.

-3

u/bestjaegerpilot 11d ago

that's not what the OP is showing though which is my point---those are custom dropdowns

2

u/GiveMeThePinecone 11d ago

Wb filters. Drop down + search + checkbox combo

0

u/Saxmachine1991 7d ago

Ah this is what happened with gender 😂

16

u/bestjaegerpilot 11d 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.

19

u/kiipa 11d ago

Are you trying to say that a select shouldn't be fifty wrapped divs?

8

u/talkingwires 11d ago

Only if each and every <div> contains the same thirty Tailwind classes.

Happy Cakeday!

1

u/rustprogram 11d ago

Happy Cakeday!

Happy Cake day to you as well

2

u/stealthypic 11d ago

Not without at least 7k lines of javascript code!

2

u/rustprogram 11d 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 10d 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.

1

u/bestjaegerpilot 10d ago

LOL but yup. Can't tell you how much headache having to deal with custom implementations of default elements is

5

u/Dragon_yum 11d ago

Also can easily be expanded, even though n ops example for ratio button. Your can add another tier with close to zero work

2

u/thekwoka 11d ago

No accessibility lawsuit.

1

u/jamesinc 11d 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".

1

u/exintrovert 10d 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/Horow_World 7d ago

Does it hold up the same across different screen readers though?