Modal sheets temporarily block interaction with the underlying content. They are typically used when the user must complete a task, such as selecting an option, editing data, or confirming an action, before returning to the previous screen. They are ideal for focused tasks that demand user attention without full-screen context switching.

Modal sheets slide up from the bottom of the screen and often include a drag indicator, title bar, and buttons for action confirmation or cancellation. Because modal sheets interrupt the user’s workflow and block interaction with the background, they should be used for tasks that are clearly scoped and time-bound. Modal sheets are most effective when designed to support quick decisions or small workflows without the need for deep navigation. See Multi-Column Layout for more information on layouts and widths.

Modal sheet in compact width

Full-screen modals take up the entire screen and are typically used for critical workflows that require a high level of user attention. They are best used for tasks that are complex and require the user’s full attention.

Full-screen modals are used in compact width. To exit from a full-screen modal in compact width, the user must tap on one of the two action buttons placed in the navigation bar. The button on the left is usually a “Cancel” button, which abandons the current task. The button on the right is used to complete the task or save the user’s progress.

Full-screen modal in compact width

Form sheets are used to collect data from users, and support focused, short tasks, such as filling out a form. Users should be able to complete the task without referring to extra information outside of the modal.

Form sheets are used by default for modal presentation in regular width classes unless full-screen is explicitly chosen. They usually appear in the center of the screen with a semi-transparent overlay underneath. Tapping outside of the form sheet allows the user to exit the window.

Form sheet in regular width

Non-modal sheets allow users to continue interacting with the main interface or other parts of the screen while the non-modal sheet is open.

They are used to display supplementary information, such as filters, metadata, or search tools, that support but do not block the user’s primary task. Non-modal sheets support flexible workflows and are particularly useful in productivity or multitasking contexts, since they enable users to view and act upon transient information without fully disrupting their current activity.

Tapping outside or using a close gesture such as swipe down or a button such as "Done" can dismiss the non-modal sheet.

Non-modal sheet displaying filter options (regular width)

A sheet transforms into a popover in larger devices such as iPad to take advantage of increased screen real estate. Popovers should be used only to communicate a small amount of information or functionality, as they disappear after users interact with it.

Popovers appear above other content when people tap a control or interactive area, and are anchored to triggering elements. They do not block interaction with other parts of the app, and are automatically dismissed when the focus is lost. Popovers should also only be used for regular width, not compact width (iPhone). See Multi-Column Layout for more information on layouts and widths.

Popover example in regular width