Updated: July 10, 2017

Segmented Control

Intro

A segmented control is a horizontal bar divided into two or more mutually-exclusive buttons. This control provides users easy access to specific categories of content.

Usage

Do’s

  • Ensure the control’s segments are related to each other.
  • Use a segmented control to switch between views. In the Campus app, for example, a segmented control is used to switch between Map and List views.

Don’ts

  • Do not use a segmented control if the segments are not related to each other.
  • Do not use a segmented control to narrow a list. Use a Filter instead.
  • Do not include more than one segmented control on the same screen.

Structure

Location

A segmented control may be found in a navigation bar, modal window, popover, or “drawer” (i.e., a pulley view controller).

Types

The maximum number of buttons that may appear in a segmented control varies depending on whether the nav bar also includes a title.

In compact, the maximum number of buttons is four when there is a title in the nav bar and two when there is no title.

In regular, the maximum number of buttons is six when there is a title in the nav bar and four when there is no title.

Navigation Bar with Title

Navigation Bar Without Title

Behavior and Interaction

When a button is tapped, the data corresponding to that segment is displayed and the button remains highlighted. Each segment allows the user to view a different set of information.

Styles

All segments should be equal in width and can contain either text or an image; refrain from using both simultaneously. Be sure to properly apply branding to the segmented control so it matches your app’s appearance.