Updated: January 26, 2022

Segmented Control

FUISegmentedControl, FUISegmentControl

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.

iPhone (left) and iPad (right)
iPhone (left) and iPad (right)

Usage

Do
  • 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.
  • Use the segmented control in a navigation bar, modal window, popover, or “drawer” (i.e., a pulley view controller).
Don't
  • 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.

Anatomy

A. Inactive control item

There is at least one inactive control item in a segmented control.

B. Active control item

There is at least one active control item in a segmented control.

Segmented control anatomy
Segmented control anatomy

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.

Adaptive Design

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

In compact, the maximum number of buttons is five when there is a title in the navbar and four when there is no title.

In regular, the maximum number of buttons is five whenever there is a title in the navbar.

Segmented control with navigation title
Segmented control with navigation title
Segmented control without navigation title
Segmented control without navigation title

Resources

Related Components/Patterns: Segmented Form Cell

Development: FUISegmentControl, FUISegmentedControl

SAP Fiori for Android: N/A