All components
Learn how to use and customize system-defined components to give people a familiar and consistent experience.
Content
Charts
A chart helps you communicate data in a graphical, approachable way.
Image views
An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background.
Text views
A text view displays multiline, styled text content, which can optionally be editable.
Web views
A web view loads and displays rich web content, such as embedded HTML and websites, directly within your app.
Layout and organization
Boxes
A box creates a visually distinct group of logically related information and components.
Collections
A collection manages an ordered set of content and presents it in a customizable and highly visual layout.
Column views
A column view — also called a browser — lets people view and navigate a data hierarchy using a series of vertical columns.
Disclosure controls
Disclosure controls reveal and hide information and functionality related to specific controls or views.
Labels
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
Lockups combine multiple separate views into a single, interactive unit.
Outline views
An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows.
Split views
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.
Tab 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
Activity views
An activity view — often called a share sheet — presents a range of tasks that people can perform in the current context.
Buttons
A button initiates an instantaneous action.
Context menus
A context menu provides access to functionality that’s directly related to an onscreen item, without cluttering the interface.
Dock menus
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.
Edit menus
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.
Menus
A menu reveals its options when people interact with it, making it a space-efficient way to present commands in your app or game.
Pop-up buttons
A pop-up button displays a menu of mutually exclusive options.
Pull-down buttons
A pull-down button displays a menu of items or actions that directly relate to the button’s purpose.
Toolbars
A toolbar provides convenient access to frequently used commands and controls that perform actions relevant to the current view.
Navigation and search
Navigation bars
A navigation bar appears at the top of an app screen, enabling navigation through a hierarchy of content.
Path controls
A path control shows the file system path of a selected file or folder.
Search fields
A search field lets people search a collection of content for specific terms they enter.
Sidebars
A sidebar enables app navigation and provides quick access to top-level collections of content in your app or game.
Tab bars
Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.
Token fields
A token field is a type of text field that includes tokens — blocks of text that people can easily select and manipulate.
Presentation
Action sheets
An action sheet is a modal view that presents choices related to an action people initiate.
Alerts
An alert gives people critical information they need right away.
Page controls
A page control displays a row of indicator images, each of which represents a page in a flat list.
Panels
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.
Popovers
A popover is a transient view that appears above other content onscreen when people click or tap a control or interactive area.
Scroll views
A scroll view lets people view content that’s larger than the view’s boundaries by moving the content horizontally or vertically.
Sheets
A sheet helps people perform a scoped task that’s closely related to their current context.
Windows
A window contains the views and components that present the user interface of your app or game.
Selection and input
Color wells
A color well lets people adjust the color of text, shapes, guides, and other onscreen elements.
Combo boxes
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.
Image wells
An image well is an editable version of an image view.
Onscreen keyboards
In iOS, iPadOS, and tvOS, the system provides various types of onscreen keyboards people can use to enter data.
Pickers
A picker displays one or more scrollable lists of distinct values that people can choose from.
Segmented controls
A segmented control is a linear set of two or more segments, each of which functions as a button.
Sliders
A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
Steppers
A stepper is a two-segment control that people use to increase or decrease an incremental value.
Text fields
A text field is a rectangular area in which people enter or edit small, specific pieces of text.
Toggles
A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.
Status
Activity rings
Activity rings show an individual’s daily progress toward Move, Exercise, and Stand goals.
Gauges
A gauge displays a specific numerical value within a range of values.
Progress indicators
Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations.
Rating indicators
A rating indicator uses a series of horizontally arranged graphical symbols — by default, stars — to communicate a ranking level.
System experiences
Complications
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.
Live Activities
A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.
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.
Notifications
A notification gives people timely, high-value information they can understand at a glance.
Status bars
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.
Top Shelf
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.
Watch faces
A watch face is a view that people choose as their primary view in watchOS.
Widgets
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.