Segmented Controls

A segmented control is a horizontal set of two or more segments, each of which functions as a button—usually configured as a toggle. Segmented controls provide closely related choices that affect an object, state, or view. Like buttons, segments can contain text or icons.

Single choice

Multiple choices

A segmented control can enable a single choice or multiple choices. For example, in Keynote the user can select only one segment in the alignment options control to align or justify selected text. However, the user can choose any combination of segments in the font attributes control to enable boldface, italics, and underline. The toolbar of a Keynote window also uses a segmented control to let the user show and hide various editing panes within the main window area.

In general, try to keep segment size consistent. When all segments have equal width, a segmented control feels balanced. To the extent possible, it's best to keep icon and label widths consistent too.

Consider using labels to add clarity. A single label can be used to introduce a segmented control and clarify its purpose. When individual segments contain icons, labels can also be placed below the segments to clarify the meaning of the icons.

Use the appropriate style when a segmented control appears in a toolbar. A segmented control residing in a toolbar should have the same rounded, textured appearance adopted by other toolbar controls. For developer guidance, see NSSegmentStyleTexturedRounded.

Use a tab view in the main window area instead of a segmented control for view switching. A tab view is similar in appearance to a segmented control, and is designed for efficient view switching. See Tab Views. Segmented controls are suitable options for view switching when used in a toolbar or inspector pane, however.

Don’t use a segmented control for add and remove actions. If you need a way for the user to add and remove items in a table or other view, use gradient buttons. For developer guidance, see NSSmallSquareBezelStyle. If you need to provide add and remove actions in a toolbar or other part of a window frame, use rounded textured buttons. For developer guidance, see NSTexturedRoundedBezelStyle.

Use nouns or noun phrases for segment text. If your segments includes text rather than icons, provide text that describes a view or object and uses title-style capitalization. When segments contain text, a label introducing the entire control is probably unnecessary.

Avoid mixing text and icons in a segmented control. Although individual segments can contain text or icons, mixing the two in a single control can lead to a disconnected and confusing interface.

Prefer system-provided icons for segment icons. People are familiar with the system icons and because the icons are template images, they automatically have the appropriate appearance by default and in response to user interactions. See System Icons.

Use the system icons for reference. Refer to the system icons when designing custom icons, and strive for a similar appearance.

Scale custom icons appropriately based on the size of the control. For sizing guidance, see Segmented Control Icons.

Position content appropriately in a custom segmented control. If necessary, you can adjust the alignment of text and positioning of icons to make sure segments look great and don't appear misaligned.

Consider enabling spring loading. Segments can be configured to support spring loading on systems with a Force Touch trackpad. Spring loading lets a user activate a segment by dragging selected items over it and force clicking—pressing harder—without dropping the selected items. The user can then continue dragging the items, possibly to perform additional actions. For developer guidance, see isSpringLoaded.

For developer guidance, see NSSegmentedControl.