Segmented Controller
UISegmentedController
Styles
Using this Component
Segmented controllers are used to select between multiple content views of a page section. This functions is similar to tabs, but with a more limited scope of content change.
Page Layout
Care should be taken that segmented controllers are used in places where it is contextually clear what content will be changed using the component. Often, a segmented controller should appear beneath a UISectionHeader to provide greater context and scope to the view selection being made by the user.
Alternatives
For a view controller that impacts more than one section of a page, consider using UITabsView.
Segmented controllers should not be used to make selections for any settings other than view. For mutually exclusive selections use UIRadio or UISelectChildren.
Structure
1. Labels
Each segment of a segmented controller has a text label which should be kept as concise as possible. Text is centered within each segment.
2. Icons
Each segment of a segmented controller can have an optional icon placed to the left of the text label. Icons should either be uniformly present or uniformly absent in each segment. In select circumstances, an icon can fully replace the text label, though this is not recommended.
3. Selection Highlight
The selected segment takes on a background highlight, in addition to changing the label text style.
4. Container
All segments of a segmented controller are displayed within one contiguous rectangular container. This indicates the clickable bounds of the element.
Size
Segmented controllers should contain no more than 4 segments. The width of the component can be either fixed or responsive, but avoid making a segmented controller more than twice as wide as its labels.
Behavior
Segmented controllers are directly interactive elements that show the user what view is currently presented, and reflect this state using label and highlight styling.
Selection
One segment must be selected at all times. Clicking anywhere on an unselected segment will change the view to that option. Clicking on the already selected segment has no impact.
Default View
When navigating to a page, the leftmost segment is selected by default.
Width & Alignment
The segmented controller container is equally divided between its segments. This remains true for responsive-width segmented controllers when width is changed due to browser scaling.
Truncation
When a segment becomes too narrow to display the full label text, the label is truncated with an ellipsis (“…”).
Segment Order & Number
The number and order of segments is determined during implementation. Segments are not extensible or rearrangeable by users.
Related Components
Playground Coming Soon!
Styles
Using this Component
Segmented controllers are used to select between multiple content views of a page section. This functions is similar to tabs, but with a more limited scope of content change.
Page Layout
Care should be taken that segmented controllers are used in places where it is contextually clear what content will be changed using the component. Often, a segmented controller should appear beneath a UISectionHeader to provide greater context and scope to the view selection being made by the user.
Alternatives
For a view controller that impacts more than one section of a page, consider using UITabsView.
Segmented controllers should not be used to make selections for any settings other than view. For mutually exclusive selections use UIRadio or UISelectChildren.
Structure
1. Labels
Each segment of a segmented controller has a text label which should be kept as concise as possible. Text is centered within each segment.
2. Icons
Each segment of a segmented controller can have an optional icon placed to the left of the text label. Icons should either be uniformly present or uniformly absent in each segment. In select circumstances, an icon can fully replace the text label, though this is not recommended.
3. Selection Highlight
The selected segment takes on a background highlight, in addition to changing the label text style.
4. Container
All segments of a segmented controller are displayed within one contiguous rectangular container. This indicates the clickable bounds of the element.
Size
Segmented controllers should contain no more than 4 segments. The width of the component can be either fixed or responsive, but avoid making a segmented controller more than twice as wide as its labels.
Behavior
Segmented controllers are directly interactive elements that show the user what view is currently presented, and reflect this state using label and highlight styling.
Selection
One segment must be selected at all times. Clicking anywhere on an unselected segment will change the view to that option. Clicking on the already selected segment has no impact.
Default View
When navigating to a page, the leftmost segment is selected by default.
Width & Alignment
The segmented controller container is equally divided between its segments. This remains true for responsive-width segmented controllers when width is changed due to browser scaling.
Truncation
When a segment becomes too narrow to display the full label text, the label is truncated with an ellipsis (“…”).
Segment Order & Number
The number and order of segments is determined during implementation. Segments are not extensible or rearrangeable by users.