Touch Bar

The Touch Bar is a Retina display and input device located above the keyboard on supported MacBook Pro models.

Dynamic controls in the Touch Bar let people interact with content on the main screen and offer quick access to system-level and app-specific functionality based on the current context. For example, when people type text in a document, the Touch Bar could include controls for adjusting the font style and size. Or when viewing a location on a map, the Touch Bar could offer quick, one-tap access to nearby points of interest.

The following guidelines can help you provide a Touch Bar experience that people appreciate. For developer guidance, see NSTouchBar and Xcode Help.

A Touch ID sensor to the right of the Touch Bar supports fingerprint authentication for logging into the computer and approving App Store and Apple Pay purchases. On devices that include the Touch Bar (2nd generation), a physical Esc (Escape) key appears to the left of the Touch Bar.

By default, the right side of the Touch Bar displays an expandable region called the Control Strip that includes controls for performing system-level tasks such as invoking Siri, adjusting the brightness of the main display, and changing the volume. You can place app-specific controls in the app region to the left of the Control Strip. In Touch Bar (1st generation), an Esc button or other system-provided button may appear to the left of the app region, depending on the context.

People can configure the Touch Bar to suit their needs. For example, people can remove items from, or hide the Control Strip completely, in which case only the controls in the app region and the system button remain. Alternatively, people can hide the app region to view an expanded Control Strip.

You can support additional customization within the app region by letting people add and remove items.

In general, let people customize your app’s Touch Bar experience. Provide reasonable defaults for important and commonly used functions, but let people make adjustments to support their individual working styles.

Provide alternative text labels for your Touch Bar controls. By providing alternative text for your controls in the Touch Bar, VoiceOver can audibly describe the controls, making navigation easier for people with visual disabilities (for guidance, see Accessibility). Also create labels for any customizable Touch Bar controls that you provide so VoiceOver can describe these controls on the customization screen.

Gestures

People use a subset of the standard gestures to interact with the Touch Bar.

Tap

People tap to activate a control, like a button, or select an item, such as an emoji, a color, or a segment in a segmented control.

Touch and hold

A touch and hold gesture initiates a control’s secondary action. In Mail, for example, tapping the Flag button adds a flag to a message, but touching and holding the button reveals a modal view that lets people change the flag’s color.

Horizontal swipe or pan

People use a horizontal swipe or pan to drag an element, like a slider thumb, or navigate through content, such as a list of dates or a group of photos in a scrubber.

Multi-Touch

Although the Touch Bar supports Multi-Touch gestures — like a pinch — such gestures can be cumbersome for people to perform. In general, it’s best to use Multi-Touch gestures sparingly.

Best practices

Keep the following guidance in mind as you design your app’s Touch Bar interfaces.

Make the Touch Bar relevant to the current context on the main screen. Identify the different contexts within your app. Then, consider how you can expose varying levels of functionality based on how your app is used.

Use the Touch Bar as an extension of the keyboard and trackpad, not as a display. Although the Touch Bar is a screen, its primary function is to serve as an input device — not a secondary display. People may glance at the Touch Bar to locate or use a control, but their primary focus is the main screen. The Touch Bar shouldn’t display alerts, messages, scrolling content, static content, or anything else that distracts people from the main screen.

Strive to match the look of the physical keyboard. When possible, aim to design Touch Bar controls that resemble the size and color of keys in the physical keyboard.

Avoid making functionality available only in the Touch Bar. Not all devices have a Touch Bar, and people can disable app controls in the Touch Bar if they choose. Always give people ways to perform tasks using the keyboard or trackpad.

In a full-screen context, consider displaying relevant controls in the Touch Bar. In full-screen mode, apps often hide onscreen controls and reveal them only when people call for them by, for example, moving the pointer to the top of the screen. If you support full screen, you can use the Touch Bar to give people persistent access to important controls without distracting them from the full-screen experience.

Prefer controls that produce immediate results. Ideally, Touch Bar controls give people quick ways to perform actions that would otherwise require extra time spent clicking controls or choosing from menus. Minimize Touch Bar controls that present additional choices, such as popovers. For guidance, see Controls and views.

Be responsive to Touch Bar interactions. Even when your app is busy doing work or updating the main screen, respond instantly when people use a Touch Bar control.

When possible, people should be able to start and finish a task in the Touch Bar. Avoid making people switch to the keyboard or trackpad to complete a task unless the task requires more complex interface controls than the Touch Bar provides.

Avoid using the Touch Bar for tasks associated with well-known keyboard shortcuts. The Touch Bar shouldn’t include controls for tasks such as find, select all, deselect, copy, cut, paste, undo, redo, new, save, close, print, and quit. It also shouldn’t include controls that replicate key-based navigation, such as page up and page down.

Accurately reflect the state of a control that appears in both the Touch Bar and on the main screen. For example, if a button is unavailable on the main screen, it shouldn't be available in the Touch Bar.

When responding to user interactions, avoid showing the same UI in both the Touch Bar and the main screen. For example, when people click the onscreen Emoji & Symbols button in a new message window in Mail, they expect the Character Viewer to open on the main screen, not in the Touch Bar. Unless people interact with the same control in both places, avoid distracting people by displaying redundant UI.

Animation

Avoid animation. The Touch Bar is an extension of the keyboard, and people don’t expect animation in their keyboard. In addition, excessive or gratuitous animation can distract people from their work.

Color

Prefer standard controls and system icons. The standard controls and system icons already use colors that work well in the Touch Bar. For a list of available system icons, see Interface icons.

Provide wide color artwork. The Touch Bar supports a P3 color space that can produce richer, more saturated colors than sRGB. Use the Display P3 color profile at 16 bits per pixel (per channel) and export your artwork in the PNG format. For guidance, see Color management.

System colors

macOS offers a range of standard system colors that respond automatically to system white-point changes based on factors such as ambient light and keyboard backlight level.

Color	API
Blue	systemBlueColor
Brown	systemBrownColor
Gray	systemGrayColor
Green	systemGreenColor
Orange	systemOrangeColor
Pink	systemPinkColor
Purple	systemPurpleColor
Red	systemRedColor
Yellow	systemYellowColor

Dynamic system colors

macOS defines a range of system colors that dynamically match the color scheme of standard interface controls such as buttons and labels. The following system colors are ideal for use in the Touch Bar.

Color	Description	API
Control Color	The system color for the surface of a control.	controlColor
Label Color	The system color for the text of a label.	labelColor
Secondary Label Color	The system color for label text of lesser importance than labelColor text, for example, a subheading or additional information.	secondaryLabelColor
Tertiary Label Color	The system color for label text of lesser importance than secondaryLabelColor, for example, disabled text.	tertiaryLabelColor
Quaternary Label Color	The system color for label text of lesser importance than tertiaryLabelColor, for example, disabled text.	quaternaryLabelColor

Layout

The width of the Touch Bar display differs depending on the device.

Touch Bar areas

In its standard configuration, the Touch Bar display consists of either two or three areas, depending on the device. The system enforces a 16pt separation between areas.

The Touch Bar (2nd generation) display contains two areas: the app region and the Control Strip. Although the second generation Touch Bar doesn’t include a system button area, you can display a system button within your app region.

The Touch Bar (1st generation) display includes three areas: the system button area, the app region, and the Control Strip.

Area	Contains	User configurable?
Control Strip	System-level controls for performing actions, like initiating Siri or adjusting the volume level.	Yes. People can extend the Control Strip to the full width of the Touch Bar, collapse it to the right side of the Touch Bar, reduce it in size, or hide it entirely. By default, the Control Strip appears in its collapsed state and contains four controls.
App region	Your app’s controls.	Yes. People can hide this area entirely. When the Control Strip is visible, the app region has a minimum width of 685pt.
System button (available on some models)	A contextually relevant button, like Esc, Cancel, or Done.	No. When present, this area's width is 64pt. In Touch Bar (2nd generation), you can use 8pt spacing to display the relevant button in the app region, where it's disabled by default.

Positioning app controls

You have several options for adding visual separation between app controls in the Touch Bar.

Spacing type	Width between controls
Default	8pt
Small fixed space	16pt
Large fixed space	32pt
Flexible space	Varies to match the available space.

Common layout styles

Touch Bar layouts can vary significantly from app to app because of factors like configuration options, various control sizes, and the device your app is running on. When possible, use one of the following common layout styles for your controls.

Layout with one principal item. The center of the Touch Bar contains a single large control, such as a candidate list. Additional controls, such as buttons and segmented controls, are on the left. In Touch Bar (2nd generation), layouts with one principal item can look like this:

In Touch Bar (1st generation), layouts with one principal item can look like this:

Layout with two principal items. The center of the Touch Bar contains two consistently sized controls. Additional controls are on the left.

In Touch Bar (2nd generation), a layout with two principal items can look like this:

In Touch Bar (1st generation), a layout with two principal items can look like this:

Layout with three principal items. The center of the Touch Bar contains three consistently sized controls. Additional controls are on the left.

In Touch Bar (2nd generation), a layout with three principal items can look like this:

In Touch Bar (1st generation), a layout with three principal items can look like this:

Fluid layout. This layout includes consistently-sized controls, such as buttons.

In Touch Bar (2nd generation), a fluid layout can look like this:

In Touch Bar (1st generation), a fluid layout can look like this:

Typography

The Touch Bar uses a variant of San Francisco, the system font in macOS. Standard Touch Bar controls, such as buttons and segmented controls, automatically use this variant. For guidance, see Typography; for developer guidance, see NSFont.

Interface icons

macOS provides many interface icons you can use to represent common tasks and types of content in your app’s Touch Bar controls.

When you use AppKit API to display a system-provided glyph, you automatically get an image in the format that’s appropriate for the version of macOS in which your app is running. For example, if your app runs in macOS 11 and later, you get an SF Symbol; if your app runs in Catalina or earlier, AppKit continues to provide the existing template image. For developer guidance, see NSTouchBarItem.

Prefer system images because people are familiar with them. Also, system-provided glyphs automatically receive appropriate coloring, respond to system white-point changes based on factors such as ambient light and keyboard backlight level, and respond to user interactions.

Use each system-defined glyph according to its meaning — not its appearance. When you choose an image for its meaning, your app can remain visually consistent with the system even if the appearance of the image changes.

Use only system images that are designed for the Touch Bar. Don’t use other types of images in the Touch Bar, such as toolbar glyphs.

Design a custom symbol or image if you can’t find a system-defined one that meets your needs. Designing a custom symbol or image lets you communicate unique details that help people use your app; repurposing a system-defined image can cause confusion. For guidance, see Custom Touch Bar icons; for general design guidance, see Icons.

Image (Catalina and earlier)	SF Symbol (macOS 11 and later)	Meaning
touchBarAddDetailTemplate	plus.circle	Displays additional detail for an item.
touchBarAddTemplate	plus	Creates a new item.
touchBarAlarmTemplate	alarm	Sets or displays an alarm.
touchBarAudioInputMuteTemplate	mic.slash	Mutes audio input or denotes that audio input is muted.
touchBarAudioInputTemplate	mic	Denotes audio input.
touchBarAudioOutputMuteTemplate	speaker.slash.fill	Mutes audio output or denotes that audio output is muted.
touchBarAudioOutputVolumeHighTemplate	speaker.wave.3.fill	Sets the audio output volume to high or denotes that the audio output volume is set to high.
touchBarAudioOutputVolumeLowTemplate	speaker.wave.1.fill	Sets the audio output volume to low or denotes that the audio output volume is set to low.
touchBarAudioOutputVolumeMediumTemplate	speaker.wave.2.fill	Sets the audio output volume to medium or denotes that the audio output volume is set to medium.
touchBarAudioOutputVolumeOffTemplate	speaker.fill	Turns off audio output or denotes that audio output is turned off.
touchBarBookmarksTemplate	book	Shows app-specific bookmarks.
touchBarColorPickerFill	–	Shows a color picker so the user can select a fill color.
touchBarColorPickerFont	–	Shows a color picker so the user can select a text color.
touchBarColorPickerStroke	–	Shows a color picker so the user can select a stroke color.
touchBarCommunicationAudioTemplate	phone	Initiates or denotes audio communication.
touchBarCommunicationVideoTemplate	video	Initiates or denotes video communication.
touchBarComposeTemplate	square.and.pencil	Opens a new document or view in edit mode.
touchBarDeleteTemplate	trash	Deletes the current or selected item.
touchBarDownloadTemplate	arrow.down.circle	Downloads an item.
touchBarEnterFullScreenTemplate	arrow.up.left.and.arrow.down.right	Enters full screen mode.
touchBarExitFullScreenTemplate	arrow.down.right.and.arrow.up.left	Exits full screen mode.
touchBarFastForwardTemplate	forward.fill	Fast-forwards through media playback or slides.
touchBarFolderCopyToTemplateName	plus.rectangle.on.folder	Copies an item to a destination.
touchBarFolderMoveToTemplate	folder	Moves an item to a new destination.
touchBarFolderTemplate	folder	Opens or represents a folder.
touchBarGetInfoTemplate	info.circle	Displays additional information about an item.
touchBarGoBackTemplate	chevron.backward	Returns to the previous screen or location.
touchBarGoDownTemplate	chevron.down	Moves to the next vertical item.
touchBarGoForwardTemplate	chevron.forward	Moves to the next screen or location.
touchBarGoUpTemplate	chevron.up	Moves to the previous vertical item.
touchBarHistoryTemplate	clock	Displays historical information, such as recent downloads.
touchBarIconViewTemplate	square.grid.2x2	Displays items in an icon view.
touchBarListViewTemplate	list.bullet	Displays items in a list view.
touchBarMailTemplate	envelope	Creates an email message.
touchBarNewFolderTemplate	folder.badge.plus	Creates a new folder.
touchBarNewMessageTemplate	message	Creates a new message or denotes the use of messaging.
touchBarOpenInBrowserTemplate	safari	Opens an item in the user’s browser.
touchBarPauseTemplate	pause.fill	Pauses media playback or slides. Always store the current location when pausing, so playback can resume later.
touchBarPlayPauseTemplate	playpause.fill	Toggles between playing and pausing media or slides.
touchBarPlayTemplate	play.fill	Begins or resumes media playback or slides.
touchBarQuickLookTemplate	eye	Opens an item in Quick Look.
touchBarRecordStartTemplate	circle.fill	Begins recording.
touchBarRecordStopTemplate	stop.fill	Stops recording or stops media playback or slides.
touchBarRefreshTemplate	arrow.clockwise	Moves backwards through media playback or slides.
touchBarRewindTemplate	backward.fill	Moves backwards through media playback or slides.
touchBarRotateLeftTemplate	rotate.left	Moves to the next vertical item.
touchBarRotateRightTemplate	rotate.right	Rotates an item to the right.
touchBarSearchTemplate	magnifyingglass	Displays a search field or initiates a search.
touchBarShareTemplate	square.and.arrow.up	Shares content with others or to social media.
touchBarSidebarTemplate	sidebar.leading	Displays a sidebar in the current view.
touchBarSkipAhead15SecondsTemplate	goforward.15	Skips 15 seconds ahead during media playback.
touchBarSkipAhead30SecondsTemplate	goforward.30	Skips 30 seconds ahead during media playback.
touchBarSkipAheadTemplate	forward.end.alt.fill	Skips to the next chapter or location during media playback.
touchBarSkipBack15SecondsTemplate	gobackward.15	Skips 15 seconds back during media playback.
touchBarSkipBack30SecondsTemplate	gobackward.30	Skips 30 seconds back during media playback.
touchBarSkipBackTemplate	backward.end.alt.fill	Skips to the previous chapter or location during media playback.
touchBarSkipToEndTemplate	forward.end.fill	Skips to the end during media playback.
touchBarSkipToStartTemplate	backward.end.fill	Moves to the next vertical item.
touchBarSlideshowTemplate	play.rectangle	Starts a slideshow.
touchBarTagIconTemplate	tag	Applies a tag to an item.
touchBarTextBoldTemplate	bold	Makes text bold.
touchBarTextBoxTemplate	textbox	Inserts a text box.
touchBarTextCenterAlignTemplate	text.aligncenter	Center aligns text.
touchBarTextItalicTemplate	italic	Italicizes text.
touchBarTextJustifiedAlignTemplate	text.justify	Justifies text, aligning it to both the left and right.
touchBarTextLeftAlignTemplate	text.alignleft	Left-aligns text.
touchBarTextListTemplate	list.bullet	Inserts a list or converts text to list form.
touchBarTextRightAlignTemplate	text.alignright	Right-aligns text.
touchBarTextStrikethroughTemplate	strikethrough	Applies a strikethrough to text.
touchBarTextUnderlineTemplate	underline	Underlines text.
touchBarUserAddTemplate	person.crop.circle.badge.plus	Creates a new user.
touchBarUserGroupTemplate	person.2.fill	Shows or represents information about a group of users.
touchBarUserTemplate	person.fill	Shows or represents information about a user.
touchBarVolumeDownTemplate	speaker.wave.1.fill	Decreases the volume.
touchBarVolumeUpTemplate	speaker.wave.3.fill	Increases the volume.

Custom Touch Bar icons

If your app includes tasks or modes that can’t be represented by a system-provided Touch Bar image, you can create your own. Apple Design Resources provides downloadable Photoshop and Sketch templates you can use to design properly scaled icons for the Touch Bar. For guidance, see Icons.

In general, create icons that look similar to the icons on the physical keyboard keys. Supply high-resolution images with a scale factor of @2x for all artwork that appears in the Touch Bar. To learn about image resolutions, see Scale factors.

Design recognizable icons that clearly relate to your app on the main screen. If necessary, you can vary the images to match the style of the Touch Bar.

Avoid icons that extend to the full height of the Touch Bar. In general, icons shouldn’t exceed 44px in height (36px for circular icons).

Ideal icon size	18x18 pt (36x36 px @2x)
Maximum icon size	22x22 pt (44x44 px @2x)

Keep icons optically centered. Crop artwork to match the icon’s width, then add padding as needed to keep the icon optically centered when it’s displayed in a control.

Prefer a 45-degree angle for diagonal elements. Using the same angle as in system icons like Audio Input Mute and Compose helps your custom icons look at home in the Touch Bar.

Avoid using color to communicate on and off states. The system already changes the background appearance of standard controls that are in an off state.

Give most icons a 100% opacity fill. To optimize readability, you might want to use a 70% opacity fill in combination with a 100% opacity fill. Use midtones only for improving readability and balance.

For guidance, see Color.

To match the style of the physical keyboard, give most icons a 2px stroke. If your design requires more visual weight, consider a 3px stroke.

As much as possible, match the corner styles of the system images. For example, use square corners for icons with a 2px stroke, rounded corners with a 1px radius for icons with a 3px stroke, and rounded corners with a 4px radius for solid shapes.

Controls and views

The system offers a range of standard controls you can provide in the app region of the Touch Bar. For consistency, use these controls when possible.

Buttons

Buttons initiate app-specific actions, and can include an icon and a title.

Prefer icons over titles. Strive to design clear icons that stand on their own without supporting text.

Keep titles short. Lengthy titles can crowd the Touch Bar.

Customize a button’s bezel color if necessary. The system-provided button bezel looks similar to the physical keyboard buttons and contributes to a unified visual experience. If your app requires a custom bezel color, consider using a dark color, which tends to look good in the Touch Bar.

For guidance, see Buttons. For developer guidance, see NSButton.

Toggles

A toggle switches between on and off states.

Let the background indicate a toggle’s 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.

For developer guidance, see the state property of NSButton.

Candidate lists

A candidate list offers autocompletion suggestions during text entry. People can tap a suggestion to accept and insert it into the active text field or text view on the main screen. People can also expand or collapse a candidate list. An expanded candidate list replaces other controls that reside within the expansion area.

For developer guidance, see NSCandidateListTouchBarItem.

Character pickers

A character picker opens a popover that includes a list of special characters, such as emoji. People can tap a character in the picker to insert it into the active text area on the main screen.

For developer guidance, see NSCandidateListTouchBarItem.

Color pickers

A color picker opens a popover that includes controls for selecting a color. You can configure a color picker to display an icon for a color picker, a stroke color picker, or a text color picker. Regardless of the icon, 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.

Labels

A label displays read-only text that doesn’t appear within a control.

In general, avoid labels. Although the Touch Bar can display labels, it’s generally best to avoid them 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 on its own, consider including a short title within the control to provide context.

For guidance, see Labels. For developer guidance, see NSTextField.

Popovers

A closed popover looks like a single button in the Touch Bar.

When it’s open, 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, people make a selection or tap a close button to return to the collapsed state and the previous set of controls.

Collapsed popovers open when people tap them. Optionally, popovers can also open in response to a touch and hold gesture. Popovers that support touch and hold include a trailing carat decoration.

A popover can present the same overlay regardless of the gesture people use to expand it, or it can present a different overlay for each gesture. In a touch and hold overlay, people make a selection by sliding their holding finger to a control, and collapse the popover by lifting their finger.

Use popovers sparingly. Most controls in the Touch Bar should perform an action 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. Use touch and hold primarily to display an overlay that includes a simple set of options — such as a single segmented control — from which people can make a selection.

Indicate choice selection in a collapsed popover. When an expanded popover includes a list of options, the collapsed state should show 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.

Scrubbers

A scrubber lets people 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.

Fixed scrubbers

A fixed scrubber allows for fluid, continuous interaction with a set of arranged content, such as open Safari tabs. As people swipe across the scrubber, items beneath their finger become highlighted. Depending on the scrubber’s configuration, people make a selection by moving a finger to the item, or by lifting their finger from the scrubber. If the amount of content exceeds the size of a fixed scrubber, the scrubber automatically scrolls to reveal additional items as the finger nears the edge of the control. In a fixed scrubber, people use a finger to move the selection, rather than the content.

Free scrubbers

A free scrubber presents content in a scrollable list — such as a list of Calendar dates — that people swipe to scroll. Depending on the scrubber’s configuration, people select an item by moving it to a specific location, like the center of the scrubber, or by tapping the item while the scrubber is stationary.

Use predictable and logically ordered values. When the scrollable list in a free scrubber is stationary, some values may be hidden. If the list displays items in a logical order that follows an obvious progression, people can predict the hidden values and move through the list quickly. When viewing a list of country or region names, for example, people are generally better at predicting hidden values in an alphabetized list than in a list ordered by population size.

Keep lists of values as short as possible. People can find it tedious to navigate long lists 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 people can use the keyboard or trackpad for navigation.

Segmented controls

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.

Limit the number of segments to improve usability. Wider segments are easier for people to tap.

Prefer icons over titles. Strive to design clear icons that stand on their own without requiring supporting text.

Try to keep segment content size consistent. Because segments match in width, it’s visually coherent if the content in the segments is also equal in length.

Keep titles short. Lengthy titles can crowd the Touch Bar.

Prefer darker colors for bezel color changes. The appearance of the system-provided bezel resembles physical keyboard buttons. If your app requires a custom bezel color, dark colors are recommended.

For developer guidance, see NSSegmentedControl.

Sharing service pickers

People use sharing service pickers to share text, images, and other content with apps, social media accounts, and other services. When people tap a sharing service picker, it displays a popover that contains sharing buttons.

Enable a sharing service picker only when there’s content to share. If people haven’t selected text, images, or other sharable content, the sharing service picker should be disabled.

For developer guidance, see NSSharingServicePicker.

Sliders

A slider is a horizontal track with a control called a thumb, which people can slide 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.

Customize a slider’s appearance to match your app and add value. Consider coordinating a slider’s track color with your app’s color scheme.

Consider using a stepper instead of a slider when space is tight. If a slider’s values cover a limited range and it’s possible to move through them in discrete steps, it might make sense to use a stepper. For guidance, see Steppers.

Provide left and right icons that illustrate the meaning of the minimum and maximum values. A slider that adjusts image size, for example, could show a small image icon on the left and a large image icon on the right.

For developer guidance, see NSSlider.

Steppers

Steppers provide a set of continuous — usually numeric — values from which people can choose. A stepper displays the current value centered between a decrementing control and an incrementing control. People tap the controls or swipe the current value left or right to change the value by an amount you specify.

Display the item’s current value in the center view. By default, a stepper uses text to display the current value. You can use a formatter to style the text — for example, in a stepper that lets people choose dates, you might make today’s date red. In some cases, it might make sense to use images instead of text, but it can be tricky to create images that convey a logical progression from which people can predict the values that precede and follow the current value. For example, a stepper that controls the line weight of a marking tool could use a set of images that vary in thickness to help people understand the effect of incrementing and decrementing the value.

Avoid using a stepper when people are likely to make large adjustments to an item’s value. Because a stepper changes an item’s value by one discrete step per swipe or tap, people would have to swipe or tap a lot to make a large value change.

Platform considerations

Not supported in iOS, iPadOS, tvOS, or watchOS.