Sheets
Sheets provide a consistent, adaptive, and accessible way to present content above the primary surface.
The sheet container is the elevated surface bounding all of the sheet content and the only required element. The container handles the layering, transition, and interaction behaviors across sheet types.
The sheet handle acts as an affordance for the dragging behavior. Swiping upward expands sheets with overflowing content and swiping downward dismisses the sheet.
Sheets with defined heights will rest at the closest height to the dragged container. Tapping the handle toggles the sheet between defined heights.
The handle is always visible on iOS across focus and context sheets. The handle is only visible in context sheets on Android devices.
The sheet toolbar is built around the Top Navigation Bar and appears at the top of the sheet container. It contains the title, subtitle, close button, and an optional confirmation button.
If the primary action is to close the sheet, the close button appears as a trailing action. If the sheet has a confirm or overflow action, the close button appears in the leading position and the other actions appear in the trailing position.
iOS uses icon buttons by default for all actions. Android uses a CTA button as the confirm action by default.
Context sheets open partially by default and expand to full height as the content is scrolled. The content area scroll begins when the sheet reaches full height.
Focus sheets are always full height on small screens.
Sheets use a scrim to darken and block interaction with the primary page content, focusing users on the sheet’s task or information.
The sheet toolbar can be hidden for quick, simple decisions, like selecting a value from a list or when using a hero image at the top of the sheet. When hiding the toolbar, an accessible title must still be provided for screen readers and TalkBack services.
Interactive dismiss is enabled by default, allowing the sheet to be dismissed using a downward swiping gesture.
If selections within the sheet don’t automatically apply, dismissing via swiping down is the same as canceling or closing the sheet.
Interactive dismiss can be disabled when the sheet contains decisions users may want saved. The sheet presents a confirmation dialog when attempting to drag the sheet away.
Focus sheets are blocking, scoped surfaces for contained interactions related to the primary surface.
Context sheets are flexible, medium-attention surfaces for displaying relevant information above the primary surface.
Sheets on Android leverage presentation behaviors from the Material Sheet or Fullscreen Dialog. The close button is only visible when the native TalkBack accessibility feature is enabled.
Avoid placing a back button in the sheet header—Android devices use the hardware back or predictive back gesture actions.
Read more about Material Dialogs and Sheets
Sheets on iOS leverage presentation behavior from the native formSheet and pageSheet elements.
Read more about iOS sheets
