Anatomy
- Container: The outer wrapper that groups all control buttons into a single control. It defines the overall shape, background, and layout behavior of the segmented control.
- Control button: An individual selectable item within the segmented control. Each segment represents an option that can be selected or deselected.
- Icon: (Optional) An icon displayed within a segment to support visual recognition of the option.
- Item: (Optional) The text element used to describe the option represented by the segment.
Usage Guidelines
When to use this component
Use the segmented control when users need to switch between a small set of related views or content within the same screen.
- Switching between different representations of the same data (e.g. Calendar / List).
- Filtering content by a small number of mutually exclusive options.
- Toggling between closely related modes or states
- A segmented control should have 2–5 choices with text labels, or up to 6 icon-only. Too many choices can be difficult to parse and take up too much horizontal space. For a larger amount of options, use other components such as Radio Button, Checkbox, or dropdown.
Example: View switcher
Allow users to switch between Graph and List views without leaving the current screen.
Example: Change a value
Allow users to change the data format in an input field.
Example: Selecting One or More Option
Allow users to select one or more styling choices for text.
When not to use this component
Do not use the segmented control when options are numerous, unrelated, or require complex selection logic.
- Do not use a segmented control for navigating to entirely separate screens as they imply staying within the current context. Use tabs or navigation instead
- Do not use when more than 5 options are required. Too many choices can be difficult to parse and take up too much horizontal space. For a larger amount of options, use other components such as Radio Button, Checkbox, or Dropdown.
- Do not use when options are not mutually exclusive
- Avoid using a segmented control to offer actions, such as adding, removing, or editing content because they're meant for filtering or switching views. Use a button for immediate actions instead.
Best Practices
Group items within a Segmented Control that are related and have a logical connection to each other.
Don't group items that aren't clearly related.
Place the Segmented Control in close proximity (ideally just above) to the area it controls.
Do not use it segmented control to display actions. Instead, use the Button group.
Use icon only variant when they clearly reinforce meaning.
Don't use an icon-only toggle if the actions aren't clearly understood.
Use short and concise text for the labels (if applicable).
Avoid wrapping the Segmented Control onto more than a single row.
Keep the number of segments between 2 and 5.
Do not add more than 5 options. If more are needed, use Radio Button, Checkbox, or dropdown.
Think about whether your Segmented Control needs text and an icon, text only, or an icon only.
Do not mix different types together in one segmented control.
General Component Behaviors
- A segmented control does not require a "Save" button to apply the selection
- When a choice is selected, the selection immediately affects an object, state, or view
- Only one segment can be active at a time, representing a mutually exclusive choice
- Single Select type must always have a selected optio
- The button label text fills the space available, while retaining the left and right paddin
- If the text does not fit it gets truncated
Types
Text only
Control buttons contain a label only.
Icon only
Control buttons contain an icon only.
Text and Icon
Control buttons contain both an icon and a label.
States
Each control button supports the following states when selected or not:
- Default: The control button is visible.
- Pressed: The user is actively interacting with the control button by pressing it.
- Focus: The control button is focused by assistive technologies.
Unselected
Selected
Variants
The segmented control supports two selection modes: single-select and multi-select.
Single-select (Radio Functionality)
In single selection mode, only one segment can be selected at a time. Selecting a new segment automatically deselects the previously selected one. This mode is commonly used for view switching or mutually exclusive options.
Multi-select (Checkbox Functionality)
In multiple selection mode, more than one segment can be selected simultaneously. Each segment acts as an independent toggle within the group, allowing users to apply or remove options without affecting other selections.
Content Guidelines
- Segmented control button labels should be nouns or noun phrases that succinctly describe the choice
- Labels may not wrap to multiple lines
- Start labels with a capital letter
- Don’t use commas or any punctuation at the end of each label
- Avoid using more than two words per label
For further information, see the Content Styleguide.
Known Gaps
- Keyboard interaction parity between platforms.