Components
Lockups
Lockups combine multiple separate views into a single, interactive unit. Each lockup consists of a content view, a header, and a footer. Headers appear above the main content for a lockup, and footers appear below the main content. All three views expand and contract together as the lockup gets focus. According to the needs of your app, you can combine four types of lockup: cards, caption buttons, monograms, and posters. Best practices ------------------------------------------------------------------------------------------------------ Allow adequate space between lockups. A focused lockup expands in size, so leave enough room between lockups to avoid overlapping or displacing other lockups. For guidance, see Layout. Use consistent lockup sizes within a row or group. A group of buttons or a row of content images is more visually appealing when the widths and heights of all elements match. For developer guidance, see TVLockupView and TVLockupHeaderFooterView. Cards ------------------------------------------------------------------------------------ A card combines a header, footer, and content view to present ratings and reviews for media items. For developer guidance, see TVCardView Caption buttons -------------------------------------------------------------------------------------------------------- A caption button can include a title and a subtitle beneath the button. A caption button can contain either an image or text. Make sure that when people focus on them, caption buttons tilt with the motion that they swipe. When aligned vertically, caption buttons tilt up and down. When aligned horizontally, caption buttons tilt left and right. When displayed in a grid, caption buttons tilt both vertically and horizontally. For developer guidance, see TVCaptionButtonView. Monograms -------------------------------------------------------------------------------------------- Monograms identify people, usually the cast and crew for a media item. Each monogram consists of a circular picture of the person and their name. If an image isn’t available, the person’s initials appear in place of an image. Prefer images over initials. An image of a person creates a more intimate connection than text. For developer guidance, see TVMonogramContentView. Posters ---------------------------------------------------------------------------------------- Posters consist of an image and an optional title and subtitle, which are hidden until the poster comes into focus. Posters can be any size, but the size needs to be appropriate for their content. For related guidance, see Image views. For developer guidance, see TVPosterView
Page controls
A page control displays a row of indicator images, each of which represents a page in a flat list. The scrolling row of indicators helps people navigate the list to find the page they want. Page controls can handle an arbitrary number of pages, making them particularly useful in situations where people can create custom lists. Page controls appear as a series of small indicator dots by default, representing the available pages. A solid dot denotes the current page. Visually, these dots are always equidistant, and are clipped if there are too many to fit in the window.
Alerts
An alert gives people critical information they need right away. For example, an alert can tell people about a problem, warn them when their action might destroy data, and give them an opportunity to confirm a purchase or another important action they initiated. An alert is a modal view that can look different in different platforms and devices.
Context menus
A context menu provides access to functionality that’s directly related to an item, without cluttering the interface. Although a context menu provides convenient access to frequently used items, it’s hidden by default, so people might not know it’s there. To reveal a context menu, people generally choose a view or select some content and then perform an action, using the input modes their current configuration supports. For example: * The system-defined touch or pinch and hold gesture in visionOS, iOS, and iPadOS * Pressing the Control key while clicking a pointing device in macOS and iPadOS * Using a secondary click on a Magic Trackpad in macOS or iPadOS
Outline views [MacOS]
An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows. ![A stylized representation of a list of folders and images, displayed in an outline view containing four columns: [Name], [Date Modified], [Size], and [Kind]. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/9b701db1e6355e98cb72ee6b29b3ef5c/components-outline-view-intro~dark%402x.png) An outline view includes at least one column that contains primary hierarchical data, such as a set of parent containers and their children. You can add columns, as needed, to display attributes that supplement the primary data; for example, sizes and modification dates. Parent containers have disclosure triangles that expand to reveal their children. Finder windows offer an outline view for navigating the file system.
Path controls [MacOS]
A path control shows the file system path of a selected file or folder. For example, choosing View > Show Path Bar in the Finder displays a path bar at the bottom of the window. It shows the path of the selected item, or the path of the window’s folder if nothing is selected.
Popovers
A popover is a transient view that appears above other content when people click or tap a control or interactive area.
Pull-down buttons
A pull-down button displays a menu of items or actions that directly relate to the button’s purpose. After people choose an item in a pull-down button’s menu, the menu closes, and the app performs the chosen action.
Tab bars
A tab bar lets people navigate between top-level sections of your app. Tab bars help people understand the different types of information or functionality that an app provides. They also let people quickly switch between sections of the view while preserving the current navigation state within each section. For guidance using a similar component in macOS, see tab views.
Scroll views
A scroll view lets people view content that’s larger than the view’s boundaries by moving the content vertically or horizontally. The scroll view itself has no appearance, but it can display a translucent scroll indicator that typically appears after people begin scrolling the view’s content. Although the appearance and behavior of scroll indicators can vary per platform, all indicators provide visual feedback about the scrolling action. For example, in iOS, iPadOS, macOS, visionOS, and watchOS, the indicator shows whether the currently visible content is near the beginning, middle, or end of the view.
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.
Toggles
A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state. A toggle can have various styles, such as switch and checkbox, and different platforms can use these styles in different ways. For guidance, see Platform considerations. In addition to toggles, all platforms also support buttons that behave like toggles by using a different appearance for each state. For developer guidance, see ToggleStyle.
Switch Virtual keyboards [iOS]
On devices without physical keyboards, the system offers various types of virtual keyboards people can use to enter data. A virtual keyboard can provide a specific set of keys that are optimized for the current task; for example, a keyboard that supports entering email addresses can include the “@” character and a period or even “.com”. A virtual keyboard doesn’t support keyboard shortcuts. When it makes sense in your app, you can replace the system-provided keyboard with a custom view that supports app-specific data entry. In iOS, iPadOS, and tvOS, you can also create an app extension that offers a custom keyboard people can install and use in place of the standard keyboard.
Controls [iOS]
In iOS and iPadOS, a control provides quick access to a feature of your app from Control Center, the Lock Screen, or the Action button. Starting in iOS 18 and iPadOS 18, a control is a button or toggle that provides quick access to your app’s features from other areas of the system. Control buttons perform an action, link to a specific area of your app, or launch a camera experience on a locked device. Control toggles switch between two states, such as on and off. People can add controls to Control Center by pressing and holding in an empty area of Control Center, to the Lock Screen by customizing their Lock Screen, and to the Action button by configuring the Action button in the Settings app.
Steppers
A stepper is a two-segment control that people use to increase or decrease an incremental value. A stepper sits next to a field that displays its current value, because the stepper itself doesn’t display a value.
Image wells [MacOS]
An image well is an editable version of an image view. After selecting an image well, people can copy and paste its image or delete it. People can also drag a new image into an image well without selecting it first.
Complications [WatchOS]
A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist. People often prefer apps that provide multiple, powerful complications, because it gives them quick ways to view the data they care about, even when they don’t open the app. Most watch faces can display at least one complication; some can display four or more. Starting in watchOS 9, the system organizes complications (also known as accessories) into several families — like circular and inline — and defines some recommended layouts you can use to display your complication data. A watch face can specify the family it supports in each complication slot. Complications that work in earlier versions of watchOS can use the legacy templates, which define nongraphic complication styles that don’t take on a wearer’s selected color.
Status bars [iOS]
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.
Activity views [iOS]
An activity view — often called a share sheet — presents a range of tasks that people can perform in the current context. Activity views present sharing activities like messaging and actions like Copy and Print, in addition to quick access to frequently used apps. People typically reveal a share sheet by choosing an Action button while viewing a page or document, or after they’ve selected an item. An activity view can appear as a sheet or a popover, depending on the device and orientation. You can provide app-specific activities that can appear in a share sheet when people open it within your app or game. For example, Photos provides app-specific actions like Copy Photo, Add to Album, and Adjust Location. By default, the system lists app-specific actions before actions — such as Add to Files or AirPlay — that are available in multiple apps or throughout the system. People can edit the list of actions to ensure that it displays the ones they use most and to add new ones. You can also create app extensions to provide custom share and action activities that people can use in other apps. (An app extension is code you provide that people can install and use outside of your app.) For example, you might create a custom share activity that people can install to help them share a webpage with a specific social media service. Even though macOS doesn’t provide an activity view, you can create share and action app extensions that people can use on a Mac. For guidance, see Share and action extensions.
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. You can add an optional title and prompt above the line of digits.
Lockups
Lockups combine multiple separate views into a single, interactive unit. Each lockup consists of a content view, a header, and a footer. Headers appear above the main content for a lockup, and footers appear below the main content. All three views expand and contract together as the lockup gets focus. According to the needs of your app, you can combine four types of lockup: cards, caption buttons, monograms, and posters.
Live Activities [iOS]
A Live Activity displays up-to-date information from your app, allowing people to view the progress of an activity, event, or task at a glance. Live Activities provide frequent information updates that appear in glanceable locations such as the Lock Screen, on iPhone in StandBy, and the Dynamic Island. Starting in watchOS 11 and iOS 18, Live Activities also appear in the Smart Stack on Apple Watch. For apps with frequent content and status updates that go beyond the existing push notification system, Live Activities can be a more flexible way to keep people updated about live events, activities, or tasks over a couple of hours. In addition to frequently updating displayed data, they offer a way for people to interact with the information. For example, the Live Activity of a food delivery app might display the time remaining until your order arrives; a sports app could provide live in-game information for their Live Activity; and a workout app could show real time fitness metrics and offer interactive controls to pause or cancel the workout.
App Shortcuts [iOS]
An App Shortcut gives people access to your app’s key functions or content throughout the system. People can initiate App Shortcuts using features like Siri, Spotlight, and the Shortcuts app; using hardware features like the Action button on iPhone or Apple Watch; or by squeezing Apple Pencil. Because App Shortcuts are part of your app, they are available immediately when installation finishes. For example, a journaling app could offer an App Shortcut for making a new journal entry that’s available before a person opens the app for the first time. Once someone starts using your app, its App Shortcuts can reflect their choices, like those from FaceTime for calling recent contacts. App Shortcuts use App Intents to define actions within your app to make available to the system. Each App Shortcut includes one or more actions that represent a set of steps people might want to perform to accomplish a task. For example, a home security app might combine the two common actions of turning off the lights and locking exterior doors when a person goes to sleep at night into a single App Shortcut. Each app can include up to 10 App Shortcuts. Note When you use App Intents to make your app’s actions available to the system, in addition to the App Shortcuts that your app provides, people can also make their own custom shortcuts by combining actions in the Shortcuts app. Custom shortcuts give people flexibility to configure the behavior of actions, and enable workflows that perform tasks across multiple apps. For additional guidance, see the Shortcuts User Guide.
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 Look Up. In addition to text, an edit menu’s commands can apply to many types of selectable content, such as images, files, and objects like contact cards, charts, or map locations. In visionOS, and beginning in iOS 16 and iPadOS 16, the system automatically detects the data type of a selected item, which can result in the addition of a related action to the edit menu. For example, selecting an address can add an item like Get directions to the edit menu. Edit menus can look and behave slightly differently in different platforms. * In visionOS, people use the standard pinch and hold gesture to open the edit menu as a horizontal bar, or they can open it in a context menu. * In iOS, the edit menu displays commands in a compact, horizontal list that appears when people touch and hold or double-tap to select content in a view. * In iPadOS, the edit menu looks different depending on how people reveal it. When people use touch interactions to reveal the menu, it uses the compact, horizontal appearance. In contrast, when people use a keyboard or pointing device to reveal it, the edit menu uses a vertical layout in which three or four important commands can display in a row at the top. * In macOS, people can access editing commands in a context menu they can reveal while in an editing task, as well as through the app’s Edit menu in the menu bar. Editing content is rare in tvOS and watchOS experiences, so the system doesn’t provide an edit menu in these platforms.
Home Screen quick actions [iOS]
Home Screen quick actions give people a way to perform app-specific actions from the Home Screen. People can get a menu of available quick actions when they touch and hold an app icon (on a 3D Touch device, people can press on the icon with increased pressure to see the menu). For example, Mail includes quick actions that open the Inbox or the VIP mailbox, initiate a search, and create a new message. In addition to app-specific actions, a Home Screen quick action menu also lists items for removing the app and editing the Home Screen. Each Home Screen quick action includes a title, an interface icon on the left or right (depending on your app’s position on the Home Screen), and an optional subtitle. The title and subtitle are always left-aligned in left-to-right languages. Your app can even dynamically update its quick actions when new information is available. For example, Messages provides quick actions for opening your most recent conversations.
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. Menus are ubiquitous in apps and games, so most people already know how to use them. Whether you use system-provided components or custom ones, people expect menus to behave in familiar ways. For example, people understand that opening a menu reveals one or more menu items, each of which represents a command, option, or state that affects the current selection or context. The guidance for labeling and organizing menu items applies to all types of menus in all experiences. Note Several system-provided components also include menus that support specific use cases. For example, a pop-up button or pull-down button can reveal a menu of options directly relating to its action; a context menu lets people access a small number of frequently used actions relevant to their current view or task; and in macOS, menu bar menus contain all the commands people can perform in the app or game.
Boxes
A box creates a visually distinct group of logically related information and components. By default, a box uses a visible border or background color to separate its contents from the rest of the interface. A box can also include a title.
Buttons
A button initiates an instantaneous action. Versatile and highly customizable, buttons give people simple, familiar ways to do tasks in your app. In general, a button combines three attributes to clearly communicate its function: * Style. A visual style based on size, color, and shape. * Content. A symbol (or icon), text label, or both that a button displays to convey its purpose. * Role. A system-defined role that identifies a button’s semantic meaning and can affect its appearance. There are also many button-like components that have distinct appearances and behaviors for specific use cases, like toggles, pop-up buttons, and segmented controls.
Charts
Organize data in a chart to communicate information with clarity and visual appeal. An effective chart highlights a few key pieces of information in a dataset, helping people gain insights and make decisions. For example, people might use a chart to: * Learn how upcoming weather conditions might affect their plans. * Analyze stock prices to understand past performance and discover trends. * Review fitness data to monitor their progress and set new goals. To learn about designing charts to enhance your experience, see Charting data; for developer guidance, see Creating a chart using Swift Charts.
Segmented controls
A segmented control is a linear set of two or more segments, each of which functions as a button. Within a segmented control, all segments are usually equal in width. Like buttons, segments can contain text or images. Segments can also have text labels beneath them (or beneath the control as a whole).
Color wells [MacOS]
A color well lets people adjust the color of text, shapes, guides, and other onscreen elements. A color well displays a color picker when people tap or click it. This color picker can be the system-provided one or a custom interface that you design.
Image views [MacOS]
An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background. Within an image view, you can stretch, scale, size to fit, or pin the image to a specific location. Image views are typically not interactive.
Text fields
A text field is a rectangular area in which people enter or edit small, specific pieces of text.
Text views
A text view displays multiline, styled text content, which can optionally be editable. Text views can be any height and allow scrolling when the content extends outside of the view. By default, content within a text view is aligned to the leading edge and uses the system label color. In iOS, iPadOS, and visionOS, if a text view is editable, a keyboard appears when people select the view.
Action sheets [iOS]
An action sheet is a modal view that presents choices related to an action people initiate. Developer note When you use SwiftUI, you can offer action sheet functionality in all platforms by specifying a presentation modifier for a confirmation dialog. If you use UIKit, you use the UIAlertController.Style.actionSheet to display an action sheet in iOS, iPadOS, and tvOS.
Labels
A label is a static piece of text that people can read and often copy, but not edit. Labels display text throughout the interface, in buttons, menu items, and views, helping people understand the current context and what they can do next. The term label refers to uneditable text that can appear in various places. For example: * Within a button, a label generally conveys what the button does, such as Edit, Cancel, or Send. * Within many lists, a label can describe each item, often accompanied by a symbol or an image. * Within a view, a label might provide additional context by introducing a control or describing a common action or task that people can perform in the view.
Column views [MacOS]
A column view — also called a browser — lets people view and navigate a data hierarchy using a series of vertical columns. Each column represents one level of the hierarchy and contains horizontal rows of data items. Within a column, any parent item that contains nested child items is marked with a triangle icon. When people select a parent, the next column displays its children. People can continue navigating in this way until they reach an item with no children, and can also navigate back up the hierarchy to explore other branches of data. Note If you need to manage the presentation of hierarchical content in your iPadOS or visionOS app, consider using a split view.
Dock menus [MacOS]
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. The system-provided Dock menu items can vary depending on whether the app is open. For example, the Dock menu for Safari includes menu items for actions like viewing a current window or creating a new window.
Notifications
A notification gives people timely, high-value information they can understand at a glance. Before you can send any notifications to people, you have to get their consent (for developer guidance, see Asking permission to use notifications). After agreeing, people generally use settings to specify the styles of notification they want to receive, and to specify delivery times for notifications that have different levels of urgency. To learn more about the ways people can customize the notification experience, see Managing notifications.
Sliders
A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color. A slider can optionally display left and right icons that illustrate the meaning of the minimum and maximum values.
Photo Size Slider 
Web views [iOS]
A web view loads and displays rich web content, such as embedded HTML and websites, directly within your app. For example, Mail uses a web view to show HTML content in messages.
Pickers
A picker displays one or more scrollable lists of distinct values that people can choose from. The system provides several styles of pickers, each of which offers different types of selectable values and has a different appearance. The exact values shown in a picker, and their order, depend on the device language. Pickers help people enter information by letting them choose single or multipart values. Date pickers specifically offer additional ways to choose values, like selecting a day in a calendar view or entering dates and times using a numeric keypad.
Combo boxes
A combo box combines a text field with a pull-down button in a single control. People can enter a custom value into the field or click the button to choose from a list of predefined values. When people enter a custom value, it’s not added to the list of choices.
Collections [iOS]
Disclosure controls
Disclosure controls reveal and hide information and functionality related to specific controls or views.
Lists and tables
Lists and tables present data in one or more columns of rows. A table or list can represent data that’s organized in groups or hierarchies, and it can support user interactions like selecting, adding, deleting, and reordering. Apps and games in all platforms can use tables to present content and options; many apps use lists to express an overall information hierarchy and help people navigate it. For example, iOS Settings uses a hierarchy of lists to help people choose options, and several apps — such as Mail in iPadOS and macOS — use a table within a split view. Sometimes, people need to work with complex data in a multicolumn table or a spreadsheet. Apps that offer productivity tasks often use a table to represent various characteristics or attributes of the data in separate, sortable columns.
Ornaments [VisionOS]
In visionOS, an ornament presents controls and information related to a window, without crowding or obscuring the window’s contents. An ornament floats in a plane that’s parallel to its associated window and slightly in front of it along the z-axis. If the associated window moves, the ornament moves with it, maintaining its relative position; if the window’s contents scroll, the controls or information in the ornament remain unchanged. Ornaments can appear on any edge of a window and can contain UI components like buttons, segmented controls, and other views. The system uses ornaments to create and manage components like toolbars, tab bars, and video playback controls; you can use an ornament to create a custom component.
Panels [MacOS]
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. In general, a panel has a less prominent appearance than an app’s main window. When the situation calls for it, a panel can also use a dark, translucent style to support a heads-up display (or HUD) experience. When your app runs in other platforms, consider using a modal view to present supplementary content that’s relevant to the current task or selection. For guidance, see Modality.
Pop-up buttons
A pop-up button displays a menu of mutually exclusive options. After people choose an item from a pop-up button’s menu, the menu closes, and the button can update its content to indicate the current selection.
PM Select 
Search fields
A search field lets people search a collection of content for specific terms they enter. A search field is an editable text field that displays a Search icon, a Clear button, and placeholder text where people can enter what they are searching for. Search fields can use a scope control as well as tokens to help filter and refine the scope of their search. Across each platform, there are different patterns for accessing search based on the goals and design of your app. For developer guidance, see Adding a search interface to your app; for guidance related to systemwide search, see Searching.
Sheets
A sheet helps people perform a scoped task that’s closely related to their current context. By default, a sheet is modal, presenting a targeted experience that prevents people from interacting with the parent view until they dismiss the sheet (for more on modal presentation, see Modality). A modal sheet is useful for requesting specific information from people or presenting a simple task that they can complete before returning to the parent view. For example, a sheet might let people supply information needed to complete an action, such as attaching a file, choosing the location for a move or save, or specifying the format for a selection. In macOS, visionOS, and watchOS, a sheet is always modal, but in iOS and iPadOS, a sheet can also be nonmodal. When a nonmodal sheet is onscreen, people use its functionality to directly affect the current task in the parent view without dismissing the sheet. For example, Notes on iPhone and iPad uses a nonmodal sheet to help people apply different formatting to various text selections as they edit a note
Sidebars
A sidebar appears on the leading side of a view and lets people navigate between sections in your app or game. A sidebar floats above content without being anchored to the edges of the view. It provides a broad, flat view of an app’s information hierarchy, giving people access to several peer content areas or modes at the same time. A sidebar requires a large amount of vertical and horizontal space. When space is limited or you want to devote more of the screen to other information or functionality, a more compact control such as a tab bar may provide a better navigation experience. For guidance, see Layout.
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. Typically, you use a split view to show multiple levels of your app’s hierarchy at once and support navigation between them. In this scenario, selecting an item in the view’s primary pane displays the item’s contents in the secondary pane. Similarly, a split view can display a tertiary pane if items in the secondary pane contain additional content. It’s common to use a split view to display a sidebar for navigation, where the leading pane lists the top-level items or collections in an app, and the secondary and optional tertiary panes can present child collections and item details. Rarely, you might also use a split view to provide groups of functionality that supplement the primary view — for example, Keynote in macOS uses split view panes to present the slide navigator, the presenter notes, and the inspector pane in areas that surround the main slide canvas.
The menu bar [Mac OS]
On a Mac or an iPad, the menu bar at the top of the screen displays the top-level menus in your app or game. Mac users are very familiar with the macOS menu bar, and they rely on it to help them learn what an app does and find the commands they need. To help your app or game feel at home in macOS, it’s essential to provide a consistent menu bar experience. Menu bar menus on iPad are similar to those on Mac, appearing in the same order and with familiar sets of menu items. When you adopt the menu structure that people expect from their experience on Mac, it helps them immediately understand and take advantage of the menu bar on iPad as well. Keyboard shortcuts in iPadOS use the same patterns as in macOS. For guidance, see Standard keyboard shortcuts.
Token fields
A token field is a type of text field that can convert text into tokens that are easy to select and manipulate. For example, Mail uses token fields for the address fields in the compose window. As people enter recipients, Mail converts the text that represents each recipient’s name into a token. People can select these recipient tokens and drag to reorder them or move them into a different field. You can configure a token field to present people with a list of suggestions as they enter text into the field. For example, Mail suggests recipients as people type in an address field. When people select a suggested recipient, Mail inserts the recipient into the field as a token. An individual token can also include a contextual menu that offers information about the token or editing options. For example, a recipient token in Mail includes a contextual menu with commands for editing the recipient name, marking the recipient as a VIP, and viewing the recipient’s contact card, among others. Tokens can also represent search terms in some situations; for guidance, see Search fields.
Toolbars
A toolbar provides convenient access to frequently used commands, controls, navigation, and search. A toolbar consists of one or more sets of controls arranged horizontally along the top or bottom edge of the view, grouped into logical sections. Toolbars act on content in the view, facilitate navigation, and help orient people in the app. They include three types of content: * The title of the current view * Navigation controls, like back and forward, and search fields * Actions, or bar items, like buttons and menus In contrast to a toolbar, a tab bar is specifically for navigating between areas of an app.
Top Shelf [TVOS]
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. When you support full-screen Top Shelf, people can swipe through multiple full-screen content views, play trailers and previews, and get more information about your content. Top Shelf is a unique opportunity to highlight new, featured, or recommended content and let people jump directly to your app or game to view it. For example, when people select Apple TV in the Dock, full-screen previews immediately begin playing and soon the Dock slides away. As people watch previews for the first show, they can swipe through previews of all other featured shows, stopping to select Play or More Info for a preview that interests them. The system defines several layout templates that you can use to give people a compelling Top Shelf experience when they select your app in the Dock. To help you position content, you can download these templates from Apple Design Resources.
Watch faces [WatchOS]
A watch face is a view that people choose as their primary view in watchOS. The watch face is at the heart of the watchOS experience. People choose a watch face they want to see every time they raise their wrist, and they customize it with their favorite complications. People can even customize different watch faces for different activities, so they can switch to the watch face that fits their current context. In watchOS 7 and later, people can share the watch faces they configure. For example, a fitness instructor might configure a watch face to share with their students by choosing the Gradient watch face, customizing the color, and adding their favorite health and fitness complications. When the students add the shared watch face to their Apple Watch or the Watch app on their iPhone, they get a custom experience without having to configure it themselves. You can also configure a watch face to share from within your app, on your website, or through Messages, Mail, or social media. Offering shareable watch faces can help you introduce more people to your complications and your app.
Widgets
A widget elevates and displays a small amount of timely, relevant information from your app or game so people can see it at a glance in additional contexts. Widgets display content and offer specific functionality without requiring people to open your app. People can use widgets to organize and personalize their devices, quickly accessing the information and features they need. The system can display widgets in different places depending on a person’s device. In iOS and iPadOS, widgets appear on the Home Screen, in Today View, and on the Lock Screen. In macOS, people can find widgets on the desktop and in Notification Center. In watchOS, widgets appear in the Smart Stack when people turn the Digital Crown. People can access the widget gallery from the same places where widgets can appear by going into edit mode — for example, by tapping Edit on the Home Screen. The widget gallery contains a collection of widgets that people can add to their device. People can also make changes to editable widgets in the gallery, such as choosing a location in a Weather widget, or selecting a topic in a News widget. In macOS, the gallery also includes iPhone widgets from devices that use the same Apple Account. In watchOS, apps offer preconfigured widgets that the system displays in the Smart Stack, which can include up to 10 widgets. People can pin widgets to a fixed position in the Smart Stack to customize their experience. In iOS and iPadOS, the widget gallery also supports widget stacks, including a Smart Stack. A stack contains up to 10 same-size widgets; people view one widget at a time by scrolling through the stack. In a Smart Stack, the stack automatically rotates its widgets to display the widget that’s most likely to be relevant in the current context. Smart Stacks aren’t available on the Lock Screen on iPhone and iPad. A suggested widget doesn’t stay in the Smart Stack unless people choose to keep it. For developer guidance, see Increasing the visibility of widgets in Smart Stacks. Widgets come in different sizes, ranging from small accessory widgets on the Lock Screen in iOS and iPadOS, to extra large widgets in iPadOS and macOS.
Windows [MacOS]
A window presents UI views and components in your app or game. In iPadOS, macOS, and visionOS, windows help define the visual boundaries of app content and separate it from other areas of the system, and enable multitasking workflows both within and between apps. Windows include system-provided interface elements such as frames and window controls that let people open, close, resize, and relocate them. Conceptually, apps use two types of windows to display content: * A primary window presents the main navigation and content of an app, and actions associated with them. * An auxiliary window presents a specific task or area in an app. Dedicated to one experience, an auxiliary window doesn’t allow navigation to other app areas, and it typically includes a button people use to close it after completing the task. For guidance laying out content within a window on any platform, see Layout; for guidance laying out content in Apple Vision Pro space, see Spatial layout. For developer guidance, see Windows.
