Controls and Views
The system offers a range of standard controls that are designed for use in the app region of the Touch Bar. Use these controls whenever possible for maximum consistency.
Buttons initiate app-specific actions when tapped, and can include an icon and a title.
When tapped, a toggle switches between on and off states.
Let the background indicate the state. The system automatically changes the background appearance of buttons in an off state, so there’s no need to indicate the state using color, text, or a different icon.
Use toggles in place of checkboxes and radio buttons. If you need a control that lets people choose between two states, use a toggle button.
A candidate list offers autocompletion suggestions during text entry. The user can tap a suggestion to accept and insert it into the active text field or text view on the main screen. A candidate list can be expanded or collapsed by the user. An expanded candidate list replaces other controls that reside within the expansion area.
When tapped, a character picker opens a popover that includes a list of special characters, such as emoji. The user can tap one to insert it into the active text field or text view on the main screen.
For developer guidance, see NSCandidateListTouchBarItem.
When tapped, a color picker opens a popover that includes controls for selecting a color. A color picker can be configured to display a color picker icon, a stroke color picker icon, or a text color picker icon. Regardless of the icon used, all color pickers display the same popover.
Use icons as intended. Use the stroke color picker icon for selecting a stroke color. Use the text color picker icon for selecting a text color. For other color selection scenarios, use the color picker icon.
For developer guidance, see NSColorPickerTouchBarItem.
A label displays read-only text, usually to describe a control.
In general, avoid labels. Although the Touch Bar can display labels, they should generally be avoided because they’re not interactive. Instead, focus on designing meaningful icons for your controls. If you must include a label, keep it as short as possible.
Prefer titles over labels when supplementing complex icons. If the meaning of a control’s icon isn’t clear enough on its own, consider including a short title within the control to provide context.
In a collapsed state, a popover appears as a single button in the Touch Bar.
When expanded, the popover replaces the current set of controls in the app region with a modal overlay containing a transient set of controls. In this modal overlay, the user must make a selection or tap an exit button to return to the collapsed state and the previous set of controls.
Collapsed popovers are expanded by tapping them. Optionally, they can also expand in response to a touch-and-hold gesture. Popovers that support touch and hold include a trailing carat decoration.
A popover expanded by touch-and-hold can present the same overlay it presents when tapped, or a completely different overlay. In a touch-and-hold overlay, the user can press and slide a finger to a control to make a selection and lift the finger to collapse the popover.
Use popovers sparingly. Most controls in the Touch Bar should be directly actionable with a single tap.
Avoid nesting popovers. In general, people should rarely need to navigate more than one level in the Touch Bar.
Reserve touch-and-hold for simple popovers. Touch and hold is intended primarily for displaying an overlay that includes a simple set of options, such as a single segmented control, from which the user can make a selection.
Indicate choice selection in a collapsed popover. When an expanded popover includes a list of options, the collapsed state should denote the currently selected option.
Provide an obvious exit path. Make sure people always know how to collapse a popover and return to the previous set of controls.
For developer guidance, see NSPopoverTouchBarItem.
A scrubber lets the user swipe left and right to navigate through content like a list of dates or a group of photos. Scrubbers can be fixed or free, and are highly customizable—but should retain an appearance that doesn’t feel out of place in the Touch Bar.
A fixed scrubber allows for fluid, continuous interaction with a set of arranged content, such as open Safari tabs. As the user swipes a finger across the scrubber, items beneath the finger become highlighted. Depending on the scrubber’s configuration, a selection is made as the user’s finger moves from item to item, or when the user lifts the finger. If the amount of content exceeds the size of a fixed scrubber, the scrubber automatically scrolls to reveal additional items as the user’s finger nears the edge of the control. In a fixed scrubber, the user’s finger directly moves the selection, rather than the content.
Use predictable and logically ordered values. Many values in a free scrubber may be hidden when the scrollable list is stationary. It's best when people can predict what these values are, such as with a list of alphabetized countries, so they can move through the list quickly.
Avoid displaying large value lists. Long lists can be tedious to navigate in the Touch Bar. If you have a large list of values, consider presenting it on the main screen instead of the Touch Bar, so the keyboard or trackpad can be used for navigation.
A segmented control is a linear set of two or more segments, each of which functions as a button—usually configured as a toggle. Within the control, all segments are equal in width. Like buttons, segments can contain text and icons.
Sharing Service Pickers
People use sharing service pickers to share text, images, and other content with apps, social media accounts, and other services. When tapped, a sharing service picker displays a popover that contains sharing buttons.
Enable a sharing service picker only when there’s content to share. If the user has no text, images, or other sharable content selected, the sharing service picker should be disabled.
For developer guidance, see NSSharingServicePicker.
A slider is a horizontal track with a control called a thumb, which you can slide with your finger to move between a minimum and maximum value, such as screen brightness level or position during media playback. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color.