Description
Selectors display a set of icons or text buttons in a row as a single element. They allow users to choose one or more options out of a predefined range.
 |
 |
Usage & Behavior
A selector is commonly used:
As an alternative to Drop-down Menu or Radio Buttons.
As a switch between different views.
As a toggle between two or more content sections within the same panel.
General guidelines
Structure
A selector consists of:
A button group of equal options.
Individual options presented as either text or an icon.
When using icons, the options should be of equal width and prominence.
Default State
The default selection is usually the first option in the group.
Content
Button labels need to be as short as possible, and should ideally be only one word.
Alternatively, icons can be used to replace button labels.
States
State | Icon | Text | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Active |  |  | |
Selected |  |  | |
Disabled |  |  | |
Focused |  |  | |
Focused, Hover |  |  | |
Focused, Active |  |  | |
Focused, Disabled |  |  |
Interaction
Single Selection
Clicking an unselected option in the group should:
change that option to Selected.
automatically deselect the previously-selected button, which is then viewed as Regular.
Multiple Selection
Clicking an option will select it regardless to other selected items.
Clicking the option again deselects it.
In this mode the user can deselect all items.
Best practices
Use:
when there are only 5 or fewer options.
where there’s enough room to fit the options within the UI.
when you want to switch between alternative views of the same content.
when the options are closely related in context or content.
Don’t use:
if there are more than 5 option → use a Drop-down Menu or Radio Buttons.
if there is limited room to fit the options within the UI → use a Drop-down Menu.
if the options aren't closely related in context or content → use a collection of Buttons (toolbar).
General
Try to avoid using a selector for only two options.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Single selection works in the same way as a group of Radio Buttons.
Multi-selection works in the same way as a group of Checkboxes.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |