Visual Index
Most macOS apps are built using components from AppKit, a programming framework that defines common interface elements. This framework lets apps achieve a consistent appearance across the system, while at the same time offering a high level of customization. The following AppKit elements are flexible and familiar, and they automatically update when the system introduces appearance changes.
In addition to defining the interface of macOS, AppKit defines functionality your app can adopt. Through this framework, for example, your app can respond to gestures on the trackpad and enable features like drawing, accessibility, and printing. macOS tightly integrates with other programming frameworks and technologies too, like GameKit, Metal, SceneKit, and SpriteKit, enabling you to design amazingly powerful apps.
Windows and Views
A window comprises one or more views, which contain the content people see onscreen, including text, graphics, animations, and interactive elements.
Column view. Enables navigation through a data hierarchy using a series of vertical columns.
Image view. Displays a single image or an animated sequence of images over a transparent or opaque background.
Outline view. Presents hierarchical data in a scrolling list of cells that are organized into columns and rows.
Panel (HUD-style). Displays controls, options, or information related to the active document or selection in a highly visual or immersive app.
Panel (standard). Displays controls, options, or information related to the active document or selection.
Popover. Displays controls, options, or information above other content onscreen when you click a control or view.
Scroll view. Enables browsing content that’s larger than the visible area by scrolling horizontally and vertically.
Sheet. Displays controls, options, or information in a modal dialog that’s attached to a window.
Sidebar. Appears on one side of a window. Enables navigation and selection of items to act upon in the main portion of the window.
Split view. Manages the presentation of two or more panes of content.
Tab view. Presents multiple mutually exclusive panes of content in the same area.
Table view. Presents data in a scrolling list of cells that are organized into columns and rows.
Window. Consists of a frame area and body area that enables viewing and interacting with content in an app.
Menus
Menus present lists of choices, such as commands, attributes, or states.
Contextual menu. Displayed by Control-clicking an item. Provides access to frequently used commands related to the current context.
Dock menu. Displayed by Control-clicking your app’s Dock icon. Provides system-wide access to useful commands.
Menu bar menu. Provides menu bar access to app-specific commands when your app is frontmost.
Buttons
Buttons initiate actions or allow people to make choices.
Action button. Usually found in a toolbar or under a table. Exposes app-wide or table-specific commands. Similar to a contextual menu.
Checkbox. Offers a choice between two opposite states, actions, or values.
Disclosure button. Reveals and hides functionality associated with a specific control like a Save As text field in a Save dialog.
Disclosure triangle. Reveals and hides information or functionality associated with a view or in a list of disclosable items.
Gradient button. Initiates an immediate action related to a specific view, like adding or removing table rows.
Help button. Opens app-specific help documentation in the system-provided Help Viewer.
Image button. Contains an image or icon and initiates an instantaneous app-specific action.
Pop-up button. Displays a menu containing a list of mutually exclusive choices.
Pull-down button. Presents a list of commands or enables the selection of one or more states.
Push button. Contains a title and initiates an instantaneous app-specific action.
Radio button. Presents a set of two or more mutually exclusive but related choices.
Scope button. Restricts the scope of content, such as search results, within a view.
Fields and Labels
Fields and labels display static or editable information.
Combo box. Combines a text field with a pull-down button in a single control.
Label. Describes an onscreen interface element or provides a short message.
Search field. Initiates a text-based search in a large collection of values.
Text field. Allows the user to enter and edit one or more lines of text.
Token field. Allows the user to enter and edit tokens, blocks of text that can be easily selected and manipulated.
Selectors
Selectors allow people to select a specific value, like a color, date, or file.
Color well. Enables color selection using the system’s color panel.
Date picker. Enables the textual or graphical selection of a date, a time, a date and time, or a range of dates.
Image well. Editable version of an image view. Supports drag and drop, delete, copy, and paste.
Path control. Shows the file-system path of a selected file or folder.
Segmented control. Horizontal set of two or more segments that function as buttons or toggles and affect an object, state, or view.
Slider. Horizontal track, vertical track, or circular dial. Enables fine grained selection within a range of values.
Stepper. Incrementally increases or decreases a numeric, date, or time value.
Indicators
Indicators graphically communicate level or state information.
Capacity indicator (continuous). Track that fills to illustrate the current level in relation to a finite capacity.
Capacity indicator (discrete). Rectangular segments that fill to illustrate the current level in relation to a finite capacity.
Progress bar. A bar that fills to show the progression of a task with a known duration.
Progress circle. A circle that fills to show the progression of a task with a known duration.
Progress spinner. Animates as an unquantifiable task, like loading or synchronizing complex data, is performed.
Rating indicator. Communicate a ranking level using a series of horizontally arranged graphical symbols
Relevance indicator. Communicates relevancy using a series of vertical bars.
Touch Bar Controls and Views
These interface elements enable your app to present content and respond to user interactions in the macOS Touch Bar.
Button. Initiates an app-specific action when tapped. Can also operate as a toggle.
Candidate list. Offers autocompletion suggestions during text entry.
Character picker. Opens a popover that includes a list of special characters like emoji.
Color picker. Opens a popover that includes controls for selecting a color.
Popover. Appears as a button. When tapped, displays a modal overlay containing a transient set of controls.
Scrubber (fixed). Enables swiping left and right to fluidly navigate through a set of arranged content, like open Safari tabs.
Scrubber (free). Enables swiping left and right to navigate through content in a freely scrollable list, like a list of Calendar dates.
Segmented control. Horizontal set of two or more segments that function as buttons or toggles and affect an object, state, or view.
Sharing service picker. Displays a popover containing buttons for sharing content with apps, social media accounts, and other services.
Slider. Horizontal track, vertical track, or circular dial. Enables fine grained selection within a range of values.