Segmented Control

Segmented control allows users to toggle between alternate views of the same content.

Anatomy

Style / Anatomy

Item

Name

Description

1

Segmented Control container

It contains all the available, mutually exclusive segments.

2

Selected Segment

Segment that has been selected by default or by the user.

3

Unselected Segment

Alternative options for the user to choose from.

4

Segment Label

It indicates what the user should expect to show when the segment is selected.

5

Related content area

It changes based on the selected segment.