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.
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.
Buttons
Buttons initiate actions or allow people to make choices.
Checkbox. Offers a choice between two opposite states, actions, or values.
Disclosure triangle. Reveals and hides information or functionality associated with a view or in a list of disclosable items.
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.
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.
Slider. Horizontal track, vertical track, or circular dial. Enables fine grained selection within a range of values.