Anatomy
- Control Button: A button that allows the user to select or unselect an option
- Icon: (Optional) A descriptive visual that will communicate what will happen if the control is selected
- Label: (Optional) A descriptive text that will communicate what will happen if the control is selected
Usage
General
- Use for filtering content within the current view. Selecting an option instantly refines what the user sees in the current context.
- Use for switching between distinct views or categories on the same screen.
- Use when it is desirable to have all options are visible at the same time, as opposed to hidden in a dropdown.
- 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.
- 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.
- Avoid using a segmented control for navigating to entirely separate screens as they imply staying within the current context. Use tabs or navigation instead.
Switch Between Views
Example: Allow users to switch between a list view and graph view
Change a Value
Example: Allow users to change the data format in an input field
Selecting One or More Option
Example: Allow a user to select one or more styling choices for text
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.
Think about whether your Segmented Control needs text and an icon, text only, or an icon only.
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.
Place the Segmented Control in close proximity (ideally just above) to the area it controls.
Do not mix different types together in one segmented control.
Behavior
General
- 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 option
- The button label text fills the space available, while retaining the left and right padding
- If the text does not fit it gets truncated
Responsive
- In mobile the segmented control fills the full viewport
Types
Text and Icon
Text
Icon
States
Unselected
Selected
Variant
Segmented Control has two types — single and multiple.
Single Select (Radio Functionality)
- Selections are mutually exclusive
- Once a selection has been made, it can only be deselected by making a new selection
- One option is always selected
Multi-Select (Checkbox Functionality)
- Selections are not mutually exclusive. One or more option to be chosen at the same time
- Selecting a different option will keep the previous options selected
- No options or all options could be selected
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