Use illustrations only when they have a clear meaning

Illustrations should be used when they help clarify the content. If the items are too complex to represent visually, it may be better to omit them. For consistency, if one select box includes an illustration, all select boxes in the group should include one.

Keep select box groups to 9 items or less

Select box groups work best with 3 to 9 items. If your experience needs more than 9 items, consider using a dropdown, checkboxes, or radio button group instead.

Don't use select boxes as actions

Select boxes are used to choose an item from a group. If clicking an item is meant to immediately trigger an action, use an action group instead.

Use consistent sizing

All select boxes in a group should be the same size to maintain visual consistency and usability.

Don't use radio buttons in select boxes

Select boxes use a checkbox to indicate both single- and multi-selection. Don't use radio buttons for single-selection.

Checkbox vs. highlight selection

Some cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn't make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present.