Segmented control Preview
A segmented control lets someone select one option from a set of two or more segments in a single, horizontal container.
Segmented controls work well for changing states of elements or views within a single context, like switching from a contacts list to recent calls. It’s best not to use them to initiate actions or navigate to a new page; try a button or link instead. To let people navigate between the main sections of an app, use the tab bar.
Resources
Behavior
Mutually exclusive options
The segmented control only allows for one selected option at a time. Choosing a new option will deselect the current option.
Scrolling
Try to limit segmented controls to five segments on iPhone and seven segments on iPad. When there are more options than will fit on screen, the segmented control will scroll horizontally. In order for scrolling to function properly, isFixedWidth must be set to false. Segmented controls will never wrap.
Don’t force a segmented control onto a second line
Layout
In-context navigation
Segmented controls can provide in-context navigation, so they’re often placed in an app’s navigation bar. To avoid a cluttered interface, consider using segmented controls in navigation bars without additional actions or a title. If you do include a title, make sure it’s useful and applicable to all views. This way, people can focus on moving between views.
Segment and container widths
By default, segmented controls fill their parent container. In scenarios where it’s helpful to reduce the prominence of the segmented control, set isFixedWidth to true. In this case, the width of the container will be defined by the width of the individual segments.
Individual segments can have equal or unequal widths using shouldSetEqualWidthForSegments. If setting unequal widths, carefully consider the content in the segments and the visual weight larger segments might entail.
Content
Each segment supports text or icons. For best scannability, opt for using one or the other within a single segmented control. A mix of text and icons can disrupt visual rhythm and cause confusion.
Use concise labels that describe the view someone will see when they select each segment. Space is limited on mobile, so label carefully to avoid hidden options and long side scrolling.
Don’t mix text and icon segment labels