Dropdown with searchbar

[KenBonny]

I love the examples and I'm making good use of them in my personal project. I'm mainly a backend dev and I can find my way around the frontend stuff (I like vue), but CSS is one big mystery to me. So the examples get me on the way and then I can figure it out from there.

There is one I would like to request or maybe you can point it out to me, I've probably missed it as I'm blind as a bat (not the Wuhan kind! 😉 ). A dropdown menu with a search input. I've got a growing number of dropdown items and it's starting to get difficult to find or scroll to the right item. I can build the search functionality in js/ts myself, but it's the UI I'm struggling with.

[alexanderbluhm]

Hi @KenBonny
So are you talking about examples on tailwindcss docs? I am a bit confused since TailwindCSS only provides the tools you need to build such a dropdown with search component.

There are prebuilt components for example in TailwindUI but it is also easy to create them yourself. You can just search for a design you like on Dribbble for example and recreate it with Tailwind.

I am not sure what your current design system looks like but I built a very simple dropdown with search as a starting point:
https://play.tailwindcss.com/iVvZOogAHe

Probably the best idea if you use complicated components like this is to use HeadlessUI (or another library which helps you setting up these components) which provides keyboard navigation, accessibility etc. You see the components in the develop branch, they will be published in a few weeks.

Let me know if I unserstand your question right or you need any further help.

[KenBonny]

Actually, this is what I was looking for. Thanks for the swift reply!