Learn how to use and customize system-defined components to give people a familiar and consistent experience.
An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background.
A text view displays multiline, styled text content, which can optionally be editable.
A web view loads and displays rich web content, such as embedded HTML and websites, directly within your app.
Layout and organization
A box creates a visually distinct group of logically related information and components.
A collection manages an ordered set of content and presents it in a customizable and highly visual layout.
A column view — also called a browser — lets people view and navigate a data hierarchy using a series of vertical columns.
Disclosure controls reveal and hide information and functionality related to specific controls or views.
A label is a static piece of text that people can read and often copy, but not edit.
Lists and tables
Lists and tables present data in one or more columns of rows.
Lockups combine multiple separate views into a single, interactive unit.
An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows.
A split view manages the presentation of multiple adjacent panes of content, each of which can contain a variety of components, including tables, collections, images, and custom views.
A tab view presents multiple mutually exclusive panes of content in the same area, which people can switch between using a tabbed control.
Menus and actions
An activity view — often called a share sheet — presents a range of tasks that people can perform in the current context.
A button initiates an instantaneous action.
A context menu provides access to functionality that’s directly related to an onscreen item, without cluttering the interface.
On a Mac, people can secondary click an app’s or game’s icon in the Dock to reveal a Dock menu, which presents both system-provided and custom items.
An edit menu lets people make changes to selected content in the current view, in addition to offering related commands like Copy, Select, Translate, and sometimes Find.
A menu reveals its options when people interact with it, making it a space-efficient way to present commands in your app or game.
A pop-up button displays a menu of mutually exclusive options.
A pull-down button displays a menu of items or actions that directly relate to the button’s purpose.
A toolbar provides convenient access to frequently used commands and controls that perform actions relevant to the current view.
An action sheet is a modal view that presents choices related to an action people initiate.
An alert gives people critical information they need right away.
A page control displays a row of indicator images, each of which represents a page in a flat list.
In a macOS app, a panel typically floats above other open windows providing supplementary controls, options, or information related to the active window or current selection.
A popover is a transient view that appears above other content onscreen when people click or tap a control or interactive area.
A scroll view lets people view content that’s larger than the view’s boundaries by moving the content horizontally or vertically.
A sheet helps people perform a scoped task that’s closely related to their current context.
A window contains the views and components that present the user interface of your app or game.
Selection and input
A color well lets people adjust the color of text, shapes, guides, and other onscreen elements.
A combo box combines a text field with a pull-down button in a single control.
Digit entry views
A digit entry view fills the entire screen and prompts people to enter a series of digits, like a PIN, using a digit-specific keyboard.
An image well is an editable version of an image view.
In iOS, iPadOS, and tvOS, the system provides various types of onscreen keyboards people can use to enter data.
A picker displays one or more scrollable lists of distinct values that people can choose from.
A segmented control is a linear set of two or more segments, each of which functions as a button.
A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
A stepper is a two-segment control that people use to increase or decrease an incremental value.
A text field is a rectangular area in which people enter or edit small, specific pieces of text.
A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.
Activity rings show an individual’s daily progress toward Move, Exercise, and Stand goals.
A level indicator displays rich visual information related to a specific numerical value within a range.
Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations.
A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist.
Home Screen quick actions
Home Screen quick actions give people a way to perform app-specific actions from the Home Screen.
The menu bar
On a Mac, the menu bar at the top of the screen displays the top-level menus in your app or game, which typically include both system-provided menus and custom ones.
A notification gives people timely, high-value information they can understand at a glance.
A status bar appears along the upper edge of the screen and displays information about the device’s current state, like the time, cellular carrier, and battery level.
The Apple TV Home Screen provides an area called Top Shelf, which showcases your content in a rich, engaging way while also giving people access to their favorite apps in the Dock.
A watch face is a view that people choose as their primary view in watchOS.
A widget elevates a small amount of timely, personally relevant information from your app or game, displaying it where people can see it at a glance.