A searchable multi-select allows a user to easily filter a long list of options with a text search function.
is component combines a text search input and a checkbox list. The text search filters the checkbox list, making it easier for the user to find the option they wish to select.
The search function is configured to sort initial character matches to the top followed by internal character matches.
Search sorts initial character matches to the top of the list.
The checkbox list can be optionally divided into sub-groups with sub-headings (e.g. “recent”, “popular”, etc). However, divisions and headings must be removed after the user begins to type in the text input.
Using the text search removes the section headings.
The searchable multi-select can be nested in an accordion on larger screens. On small screens, it can be nested in a slide out panel.