Segmented Control
Displays closely related options upfront and lets users select one of them
Segmented controls excel at showing a close relationship between a small set of options. Because all options are visible upfront, users can easily see what’s available and switch between them quickly.
Use a segmented control when you want to:
While tabs and navigation elements represent different sections or locations, segmented controls are meant for switching between closely related variations within the same context.
Sizes
Segmented controls come in three sizes: Small, Regular, and Large.
All segments are equal width to make the control look balanced. The longest label defines the width for the segments.
Variants
Label and Icons
Segmented controls can include labels, icons, or both.
Icon and label combinations of segmented controls
Expanded segmented control
This control stretches to fill the width of its parent container. Use it in narrow containers.
Expanded segmented control
Configurations
Segmented Control
| Property | Value(s) | Default value |
|---|---|---|
| size |
| Regular |
| expanded | Boolean | False |
| activeIndex | Number | 0 |
| maxWidth | Number | 256px |
| isEqualWidth | Boolean | True |
| disabled | Boolean | False |
Segment
| Property | Value(s) | Default value |
|---|---|---|
| icon | Icon Name | - |
| label | Text | - |
| disabled | Boolean | False |
| tooltip | Text | - |
Usage
Limit to 5 segments
Too many segments can be hard to scan and understand. Aim for no more than five segments.
Using in forms
Segmented controls provide immediate, visible feedback and work best for dynamic interactions. In forms, use a segmented control as an input when the selection changes the content or structure of the form below.
Avoid using segmented controls when the choice doesn’t affect other areas of the form. In those cases, simpler input types like radio buttons or choice chips are more appropriate.
Using segmented controls to change form path
Avoid using as navigation
Segmented controls are for changing views or states within the same context. Use tabs or navigation links for switching between different sections or locations.
Avoid using for filter views
Filter views often represent independent categories. Grouping them in a segmented control can create a false sense of connection.
Switch vs Segmented control
A segmented control with only two segments behaves similarly to a switch or toggle button, where tapping either segment flips the selection.
When deciding between them, consider the representation that would communicate the design intent better:
Representing the same choice as a segmented control or a switch
Button group vs Segmented control
Buttons are used for actions like add, close, or save. Use button groups when several related actions need to be presented together. Segmented controls, on the other hand, are used for making selections. Avoid using segmented controls for actions.