Segmented control
Also known as: Toggle group, Segmented button
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Md |
Selected Boolean | true | false | false |
State Variant | Default | Hover | Focus | Disabled | Default |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Any icon | heart |
Has label Boolean | true | false | true |
Label Text | string | Label |
Has end item Boolean | true | false | true |
End item InstanceSwap | Any icon | heart |
When to use
When selected option instantly changes the view of content.
When switching between different display formats.
When user needs to switch between the options without leaving the page.
When user needs to navigate between content, use tabs instead.
When user needs to filter through the content, use chips instead.
If there are more than four segments, consider using tabs.
Size
Dimensions of the segmented control are tied to the global scale tokens. This ensures that the components, especially forms, with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-height-<size>
--scale-width-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Behaviour
States
Segmented control (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |
Length
Segmented controls are best used for selecting between 2 to 4 options. If you need add more options, consider using tab list instead.