A segmented control is a linear set of options, each of which functions like a button that can display a different view.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Segmented control |
Often used to display different views or to filter a list of elements |
On top of a list of elements |
Select an option |
Anatomy
Structure
|
|
|
selected option |
A button that allows the user to segment whatever it is the segmented control is referring to When one of the options is selected, the rest must remain unselected. The options are mutually exclusive |
|
unselected option |
Same as above |
|
label |
A piece of textual information that should be concise |
Sizes and Spaces
|
Sizes vary from xs to m. Each size corresponds to a specific set of values for the height, paddings and gutter between elements. These values are fixed according to the chosen size, no matter the context or content.
|
|
The options on the xs size have an 8px horizontal padding.
The ones on the s size have a 12px horizontal padding.
Lastly, the ones on the m size have a 16px horizontal padding.
Between every option, there's a vertical divider line with 1px width. |
|
The segmented control can either be self-contained (left) or have 100% of the container's available width (right). In the last case, the label must remain centred. |
Properties
Properties for the option
|
Property |
Value |
Description |
|---|---|---|
|
State |
default disabled hover pressed |
--- |
|
Selected |
true false |
--- |
Properties for the segmented control
|
Property |
Value |
Description |
|---|---|---|
|
Size |
xs s m |
--- |
|
State |
default disabled |
--- |
|
Options |
2 3 |
Number of options available for the segmented control |
|
Selected |
1st 2nd 3rd |
Determines which option is selected |
Behaviour
Interaction
Responsiveness
There is no change to the component when it comes to responsiveness. The width and height depend on the content and the segmented control size picked.
Guidelines
⛔️ Don't
Don't use the segmented control as a substitute for radio buttons or toggle buttons. Segmented controls shouldn't be used within a form flow.