Focus sheet

A focus sheet is a blocking, high-attention surface that interrupts the user’s primary flow to complete a task. It must be dismissed or resolved before returning to the underlying screen.

Considerations

Task-Oriented

Use focus sheets for tasks that require focus, confirmation, or important data entry.

Scoped

Limit focus sheets to a single, contained task — not for browsing or navigation.

Blocking

Focus sheets are intentionally interruptive and must be completed or dismissed before interacting with the underlying screen.

Usage

Do use when

Completing a form with many fields, like updating payment details.
Making multiple supplemental decisions, like adjusting feed preferences.

Don’t use when

Selecting from a small list of options
For quick, ephemeral actions (use a Menu/Popover instead).
For background or persistent settings (use a Navigation Rail instead).

Properties

Sheet

Focus sheets inherit common properties and behaviors from the primitive sheet component.

Behavior

Scrolling

Focus sheet content can scroll horizontally or vertically when extending past the sheet container. A scroll indicator appears temporarily as the content scrolls then fades out when scrolling stops.

A focus sheet with the content scrolled downward halfway through the list. A scrollbar is present indicating the location in the list.

Presentation

Focus sheets appear as full height on small screens and a centered sheet on larger screens. The exact presentation on small screens depends on the platform – iOS presents a modal stack and Android presents a fullscreen sheet.

Two mobile designs. Left: A focus sheet open on Android. Right: A focus sheet open on iOS.

Modality

Focus sheets completely block interactions with and obscure the primary page content. The sheet completely covers the page content on small screens and covers the center content on larger screens.

Two examples: A mobile and a tablet screen. The mobile example shows the focus sheet covering the entire screen. The tablet example shows how the focus sheet transitions to a centered modal.

Dismissing

Focus sheets require explicit dismissal or resolution. The sheet dismisses when:

Completing the sheet task via a primary button
Canceling the sheet task via an explicit cancel button
Pressing the close button in the toolbar
Swiping the sheet downwards (iOS only)
Pressing a hardware back button or using a predicative back gesture (Android only)

Illustration of multiple ways to dismiss a focus sheet: dragging the sheet handle, interacting with the close button, or completing the task.

Responsive behavior

Mobile

Focus sheets present as a modal stack on iOS and a fullscreen dialog on Android.

A mobile Android screen with an open focus sheet featuring a form to enter credit card details.

Tablet

Focus sheets present as center sheets on larger screens across platforms.

Best practices

Height

Do open forms with multiple inputs directly into a focus sheet.

Don’t partially present a sheet for tasks with multiple inputs. Users will almost always have to scroll to complete the task and the main page content isn’t necessary to reference for the task.

Navigation

Do keep navigation within focus sheets to a minimum. Place all content in one view where possible and keep detail views to one level deep. Keep multi-step sheet tasks to as few steps possible.

Don’t include complex or deep navigation stacks within sheets. Over-navigation within focus sheets increases the chance of users losing their place, making mistakes, or accidentally dismissing and losing their progress.

Scope

Do use focus sheets for scoped tasks.

Don’t use focus sheets for entire experiences. Use a new page when the content isn’t focused on a particular task or if it includes multiple levels of navigation.