Segmented Control

Segmented Control allows users to toggle between two or more content sections within the same space on the screen.


Segmented controls allow users to toggle between alternate views of similar or related content, showing only one content section at a time.

When to Use

Segmented controls are frequently used to let users toggle between different formattings, like a grid view and a table view. They are also often used to narrow large content groups. For example, a messaging tool may use a segmented control to divide messages into three views such as “All,” “Read,” and “Unread.”

When Not to Use

Tabs: when navigating between distinct content areas like subpages, use tabs instead. Tabs follow the metaphor for sections in a filing cabinet, and two tabs wouldn’t contain the same sheet of paper, so the role of tabs in the information hierarchy is to separate content.

Toggle: for binary actions or choices, such as “yes/no” or “on/off” use a toggle instead. A segmented control can be used for binary views, like switching between a grid and list view but should not be used as a binary input control.



Segmented control anatomy diagram
  1. Selected content tab: Only one control tab can be selected at a time and there should always be one selected.
  2. Content tab: Selectable container for each content view.
  3. Label: Text label or icon that describes the content view



Each content tab in the group should be the same width. The content tab with the longest text label should have at minimum 16px spacing to the right of the label.



Place the segmented control above the content area to create a clear hierarchy for the section that the segment control controls. It can be aligned to the left or right side of the content area but should never be centered in the content space.


Main Elements

Text label

  • Be concise and specific and limit text labels to two to three words.
  • Text labels should clearly communicate the view users will see and the content contained in the view.