Skip to main content
← Data, API & Backend
Data, API & Backend September 12, 2022 · 7 replies

Input select with more than 100 options : workaround ?

Archived from the Bravo community forum (2021–2026). Some answers may refer to older versions of Bravo.

I have an input select field that has more than 100 options (should go to 580 someday).

What could be the workaround to make them all appear in the dropdown ?

7 replies

app.monster September 12, 2022

I'm not sure if 580 options in a dropdown would even be good for the UX. Depending on your use case a workaround I could think of would be:
Create a second page where you have a subcategory in a dropdown menu. Use that value to populate the real dropdown with only relevant options. For example: Page one: The user selects that they have between 500 and 600 of something. Then in the drop down of page 2 only the options related to that would be selectable so: 500, 501, 502, 503,...

Divyansh September 12, 2022

What I have learnt from many big companies websites when they have something like this dropdown, they always add a search bar fixed above dropdown, this way its easy! Have you tried this? will work only if users will have some idea of what to expect in drop down. So that they dont have to scroll all 500+ options but to just type 1/2 start letters of options in search.

Bastos September 12, 2022

& 

Maybe I can better explain the use case :
After the signup page with Firebase, I have a "post-login once" page where I get the user's first name, last name, email that I retrieve from sign up and the user has to select his city.

As my clients (the entity that is paying) are the cities, I only display information regarding the "published" cities. BUT, I want to go to the cities and say "hey guys, I have that many users from your city but you're still not a member yet" to prospect them.

Until now, I only had in my post-login city dropdown the cities that were published. The fact is that I want to put all the cities in my country which has 581.

What is best then ?

I don't know if this is good UX either. Do you have a better idea ?
 Is it doable in this case ?

Divyansh September 12, 2022

great bastos, liked your aim to convince all your cities to be a member,
Bastos I have one amazing solution which will solve everything.
So,
Make a fake drop down bar, which looks exactly like a drop down,
When a user will tap on that bar (rectangle), a popup will open just below your drop down list, which will be of same size that is left below it, so you must be wondering popups only appear on middle of the screen, I think you already read my answer just now in another post as to how we can fix popup anywhere on screen.

So when user will be seeing popup (with blur background) just below your dropdown bar, there you will populate the list of all your cities with GET request, and at the top of this popup there will be a search bar.
Boom all solved and trust me, with good design of this, it will look amazingly smooth and awesome.

Thanks for this question, now I have some good move which I will use in my case for future 🙂

app.monster September 12, 2022

I like that solution! Might be even useful to always make the dropdown prettier

Wrote something in this thread and want it removed? Request removal

Still stuck?

Ask the community on Discord

This archive is read-only. New questions, office hours and product updates now happen in the Bravo Discord.

Join the Discord