SelectMultiple

The SelectMultiple component is typically used as a form element but can also be leveraged for user experiences that include searching or narrowing down data. It contains an optional search field. When within a form, the SelectMultiple will support labels, error and disabled states.

When multiple selections can be made in a list that contains 5 or more items.

• For lists that offer less than 5 options, consider using a CheckBoxGroup instead.
• When only a single selection is permitted, use the Select component instead.

1. Select: Displays current input value and control to open/close options drop.
2. Selection Summary: Succinct presentation of what a user can do, has done, and/or reset to default state.
3. Search (optional): Helps narrow down or quickly find options corresponding to the entered keyword.
4. Help Text (optional)
5. List: Available options from which the user can choose
6. List Item: Clearly displays available option and its selected state.

• Depending on the length of the dropdown list, the height of the SelectMultiple can be increased or decreased as needed with the dropHeight prop.
• For lists with more than 10 items, consider setting a max height to ensure optimum readability and scannability of list items.
• It is recommended to show approximately 10-15 items before enabling a scroll. Showing more than that will potentially increase the cognitive load on the user.

• Always use a label unless there is something else (such as preceding body text or headers) that makes that SelectMultiple’s purpose perfectly clear.
• Ordering of lists - chronological/recency
• Search: Consider including a search if your list is 10 items or longer to make it easier to browse options.