Components
Segmented control
Segmented controls allow users to select one choice from a limited, linear set of options, often used for switching views or sorting elements.
When to use
Switching views
Let users toggle between different layouts or modes (e.g., list vs. grid or daily vs. weekly view).
Switching views
Let users toggle between different layouts or modes (e.g., list vs. grid or daily vs. weekly view).
Switching views
Let users toggle between different layouts or modes (e.g., list vs. grid or daily vs. weekly view).
Inline filtering
Provide quick filtering options without forcing users to open a dropdown or modal.
Inline filtering
Provide quick filtering options without forcing users to open a dropdown or modal.
Inline filtering
Provide quick filtering options without forcing users to open a dropdown or modal.
Exclusive choice
Use when only one option should be active at a time from a small set (2–5 items).
Exclusive choice
Use when only one option should be active at a time from a small set (2–5 items).
Exclusive choice
Use when only one option should be active at a time from a small set (2–5 items).
Compact UI
Offer a more space-efficient alternative to radio buttons in toolbars or headers.
Compact UI
Offer a more space-efficient alternative to radio buttons in toolbars or headers.
Compact UI
Offer a more space-efficient alternative to radio buttons in toolbars or headers.
When to avoid
Too many options
Avoid when more than five options are needed. Use Tabs or a Select component instead.
Too many options
Avoid when more than five options are needed. Use Tabs or a Select component instead.
Too many options
Avoid when more than five options are needed. Use Tabs or a Select component instead.
Long labels
Not suitable if labels are lengthy or complex, which can break the compact layout.
Long labels
Not suitable if labels are lengthy or complex, which can break the compact layout.
Long labels
Not suitable if labels are lengthy or complex, which can break the compact layout.
Multiple selections
Avoid using when users must select more than one option. Checkboxes or multi-select are better.
Multiple selections
Avoid using when users must select more than one option. Checkboxes or multi-select are better.
Multiple selections
Avoid using when users must select more than one option. Checkboxes or multi-select are better.
Disruptive changes
Avoid if switching options triggers heavy reloads or disruptive actions without clear feedback.
Disruptive changes
Avoid if switching options triggers heavy reloads or disruptive actions without clear feedback.
Disruptive changes
Avoid if switching options triggers heavy reloads or disruptive actions without clear feedback.
Specifications
Default states
Horizontal
The standard layout: segments arranged from left to right, only as wide as needed for the content.
Vertical
Exact sizing as horizontal, but segments stacked top-to-bottom. Ideal for tight widths.
Horizontal
The standard layout: segments arranged from left to right, only as wide as needed for the content.
Vertical
Exact sizing as horizontal, but segments stacked top-to-bottom. Ideal for tight widths.
Horizontal
The standard layout: segments arranged from left to right, only as wide as needed for the content.
Vertical
Exact sizing as horizontal, but segments stacked top-to-bottom. Ideal for tight widths.
Horizontal
The standard layout: segments arranged from left to right, only as wide as needed for the content.
Vertical
Exact sizing as horizontal, but segments stacked top-to-bottom. Ideal for tight widths.
Wide states
Horizontal
Stretches to fill the available container width; segments share equal width.
Vertical
Fills vertical space available; segments stacked, each taking full width of container.
Horizontal
Stretches to fill the available container width; segments share equal width.
Vertical
Fills vertical space available; segments stacked, each taking full width of container.
Horizontal
Stretches to fill the available container width; segments share equal width.
Vertical
Fills vertical space available; segments stacked, each taking full width of container.
Horizontal
Stretches to fill the available container width; segments share equal width.
Vertical
Fills vertical space available; segments stacked, each taking full width of container.
Anatomy
1
Leading icon
Optional and can be included within each segment to provide additional visual context for the label.
2
Control
The active segment highlighting a contrasting "pill" that animates to indicate the user's current selection.
3
Container
The outer shape that visually groups and houses the segments. It provides structure and a uniform background.
Value
Segmented control
Segmented control