Searchable Multiselect

Definition

A searchable multi-select allows a user to easily filter a long list of options with a text search function.

Common Characteristics

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.

32
12
55
43
6
102
211
23
4

Search sorts initial character matches to the top of the list.

Optional Sub-headings

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.

Recent
32
102
23
All Makes
6
102
211
23
4

Using the text search removes the section headings.

Usage Guidelines

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.

Makes
Recent
32
102
23
All Makes
32
12
55
43
6
102
211
23
4