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.

Image of a segmented control that consists of four text-alignment options. The center alignment option is selected.

Single choice

Image of two segmented controls that control the appearance of gridlines in a table. In both controls, all options are selected.

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. If your app includes help tags, provide a help tag for each segment in a segmented control.

Partial screenshot of a Keynote window in which the format, animate, and document segmented control in the toolbar is highlighted.

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. If the segmented controls contains text, you don't need to label the entire control.

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 in your segmented controls. While you can use custom icons in a segmented control, consider using the system-provided icons instead. Because these icons are used throughout macOS and in Apple apps, people can quickly identify them in your app. 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.