#Consider select when you have 5 or more options
As interacting with the options require additional steps to be taken by the user, it may not be the preferred experience in the case of a couple of options.
As an alternative, radio buttons or checkboxes can make the interface cleaner and more accessible.
#Avoid select for data that is familiar to users
On the other hand, making the user scroll through a large list of options that could have easily been typed can be a poor experience.
For example, it is more natural to type out your day, month, and year of birth in separate text inputs, rather than finding the options respectively from a select.
#Provide a default selected option whenever possible
In most cases, you should be able to provide an optimal option, selected by default.
This reduces the interaction cost by saving the user time and clicks.
Additionally, defaults help users by nudging them towards the best choice.
<button> element as the trigger
This should be your go-to choice when implementing the trigger button, as it provides expected semantics and accessibility feedback to screen readers.
For more context on buttons, read the Button play.
#Fall back to the
<select> element on mobile
However well you've implemented your custom select component, it is probably not the most ergonomic experience on mobile.
iOS and Android ship with their own native widgets to be used for the
<select> element on the web.
In most cases, users are more familiar with their native platform, so be mindful of this and provide a fallback.
mousedown event to open the select
This can seem like an unnecessary nuance, and you might implement the opening with a
click event at first.
click event won't register before a
mouseup event has fired.
Essentially, this means that the select would not open before the mouse is released.
Furthermore, using a
makes it possible to open the dropdown, move over an option and select it immediately with a single interaction.
When opening the select, the focus should move into the dropdown, preventing other elements on the page from receiving focus.
#Close on outside click
When the select is open, clicking on the rest of the page should close the menu.
For a React based select, you can use the compound components pattern to express a relationship between the components in your API: