DEV Community

loading...

How to make Custom <select> but without using select?

Saugat Rai
Been working with frontend stuff and lately more into React
ใƒป1 min read

How can I make a custom select component but without using HTML tag? I have an input field and when searched it fetches data from API. The data are shown in separate div. I also tried datalist but no luck.

Alt Text

Discussion (4)

Collapse
binyamin profile image
Binyamin Green

Take a look on github, or at this repo specifically. That library explains how it creates custom dropdowns.

My gut feeling is that you do something where the select is still there but hidden. So the form receives information via the select element, but the GUI is created by something else.

Collapse
raisaugat profile image
Saugat Rai Author

Umm interesting. I'll look into that. Thank you

Collapse
kvsm profile image
Kevin Smith ๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ

Sounds like you need something like Select2 (select2.org)? If you'd rather implement it yourself, that should give you an idea of how to start.

Collapse
raisaugat profile image
Saugat Rai Author

Sure. I'll give it a try. :)