UX Patterns Guide
UI + UX Disclosure And Attention Management standard

Sheet

Present a titled sheet as an adaptive surface attached to a window, side, or viewport edge, move focus into it, keep the parent context available only as allowed by the sheet mode, and guard dismissal when work inside the sheet is unsaved.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • A user starts a short context-bound task that needs more room than a dialog but should not become a full page.
  • The surface needs adaptive size, edge attachment, drag or detent behavior, or a clear temporary child-task mode.
  • The parent context should remain visually available for orientation while interaction is blocked or deliberately shared.
  • Dismissal can be handled consistently across pointer, keyboard, back, outside click, and gesture paths.

Avoid when

  • The content is mainly destination navigation.
  • The task requires long editing, multiple steps, saved progress, routing, or shareable history.
  • The user must compare continuously with the parent page, making a drawer or standard side-by-side panel more appropriate.
  • The message is urgent and requires an explicit response before continuing.
  • The content is short local help or a small action menu.

Problem it prevents

Users need a temporary child task related to the current context, but the task needs more room and stronger dismissal rules than a small dialog or popover.

Pattern anatomy

What a strong implementation has to make clear

User need

A user starts a related form, picker, review, preview, or settings task from an existing page or object.

Pattern promise

Present a titled sheet as an adaptive surface attached to a window, side, or viewport edge, move focus into it, keep the parent context available only as allowed by the sheet mode, and guard dismissal when work inside the sheet is unsaved.

Required state

Closed parent state with an opener tied to the object, field, or task that launches the sheet.

Recovery path

Unsaved sheet edits vanish after a swipe, Escape, back, or outside click.

Access contract

Give the sheet a visible heading and use it as the accessible name.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A review follow-up sheet opens from a claim row with the title Schedule follow-up for Claim C-1042, fields, close control, compact and expanded sizes, and sticky Save and Cancel actions.
  • A modal side sheet shows a scrim over the queue, names the parent claim, and keeps discard-review controls visible when the user tries to close with unsaved edits.
  • Opening the sheet focuses the first useful field, expanding the sheet preserves typed notes, Escape triggers discard review when edits are dirty, and Save returns focus to the claim row.
  • Users can cancel a clean sheet immediately, but dirty sheets require Keep editing or Discard changes from every close route.
Weak implementation

Vague, hidden, hard to recover from

  • A panel titled Sheet opens with no selected object, no close affordance, and hidden actions below an inner scroll area.
  • A swipe-dismiss sheet contains unsaved form fields but disappears immediately when the user drags or presses Escape.
  • A user changes the appointment note, presses back, and loses the work without a decision point.
  • The sheet blocks the queue even though the user's main task is comparing records, or it contains full navigation that should belong elsewhere.
UI guidance
  • Render a sheet as a titled adaptive surface with clear edge or window attachment, visible close or back controls, stable actions, and sizing that matches the task.
  • Use scrim, elevation, divider, or shared layout treatment to communicate whether the parent is blocked, visible for orientation, or deliberately usable beside the sheet.
UX guidance
  • Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes.
  • Make save, cancel, discard, drag, Escape, back, outside click, size change, and focus return behave consistently so users understand the temporary mode.
Implementation contract

What the implementation must handle

States

  • Closed parent state with an opener tied to the object, field, or task that launches the sheet.
  • Opening state that moves focus into the sheet and communicates whether the parent is inert or shareable.
  • Open sheet state with visible title, optional subtitle or selected-object identity, close affordance, body content, and task actions.
  • Dirty state when edits, selections, or uploads inside the sheet have not been saved.

Interaction

  • The opener explains why the sheet appears and which parent object or task it belongs to.
  • Opening the sheet moves focus to the sheet title, first field, or first useful control according to task risk.
  • The sheet title names the child task or selected object rather than saying Sheet.
  • All dismissal routes use the same unsaved-change rule, including close button, Escape, back, scrim or outside click, and drag gesture.

Accessibility

  • Give the sheet a visible heading and use it as the accessible name.
  • Expose modal sheets with dialog-like semantics, inert background content, contained focus, and predictable focus return.
  • For standard side sheets, keep focus order understandable between the sheet and parent content.
  • Provide labelled close and back controls, not only a gesture affordance.

Review

  • What child task does this sheet contain, and why is it not a drawer, compact dialog, or page?
  • Which dismissal routes exist, and do they all protect unsaved edits the same way?
  • Is the parent view inert, shareable, or partially visible, and does focus behavior match that choice?
  • Does the sheet title identify the task or selected object?
Interactive lab

Inspect the states before you copy the pattern

Complete a temporary child task in a sheet

Open the follow-up sheet from a claim row, edit the note, expand and compact the sheet, try Escape or close with unsaved edits, resolve the discard review, save the task, verify focus return, and compare no-title, silent-discard, background-edit, wrong-surface, hidden-actions, and stacked-sheet failures.

Sheet
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Closed parent state with an opener tied to the object, field, or task that launches the sheet.

Keyboard / Access

Enter or Space on the opener launches the sheet.

Avoid Generating

Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions.
Evidence trail

Source-backed claims behind this guidance

Material Design 3 Side sheets

Material Design - checked

Material side sheet guidance supports standard and modal edge-attached sheet variants.

Material Components Android SideSheet

Material Components for Android - checked

Material Components side sheet docs support sheet anatomy, close affordances, scrim behavior, drag behavior, and dismissal.

WAI-ARIA APG: Dialog Modal Pattern

W3C Web Accessibility Initiative - checked

Modal dialog accessibility guidance applies to modal sheets that make the parent view inert.

Full agent/debug reference

Problem Context

  • A user starts a related form, picker, review, preview, or settings task from an existing page or object.
  • The task is short enough to remain a temporary surface but too spatially rich for a compact dialog.
  • The product needs adaptive sizing, side placement, drag or detent behavior, or a roomy edge-attached layout.
  • Dismissal could discard in-progress edits, so close, Escape, back, drag, and outside-click paths must share one rule.

Selection Rules

  • Choose sheet when the user starts a short child task tied to the current page and needs a roomy temporary surface with title, actions, and a controlled close path.
  • Use drawer when the surface is mainly supplemental inspection or light action that should preserve side-by-side comparison with the parent page.
  • Use modal dialog when the task is compact, centered, and does not need adaptive sheet sizing, edge attachment, or drag-style dismissal.
  • Use alert dialog when the user must answer an urgent or consequential interruption before continuing.
  • Use a full page when the task needs multiple steps, saved progress, shareable URL state, or long-form reading.
  • Use popover, hover card, tooltip, or inline disclosure when the content is local, brief, or does not need a temporary task mode.
  • Use a bottom sheet for mobile-first lower-edge contextual controls when reach, detents, and underlying map or feed context define the interaction.
  • Use a standard side sheet only when the sheet and parent can share layout intentionally; use a modal sheet when parent interaction must stop.

Required States

  • Closed parent state with an opener tied to the object, field, or task that launches the sheet.
  • Opening state that moves focus into the sheet and communicates whether the parent is inert or shareable.
  • Open sheet state with visible title, optional subtitle or selected-object identity, close affordance, body content, and task actions.
  • Dirty state when edits, selections, or uploads inside the sheet have not been saved.
  • Dismissal review state when a close, Escape, back, outside click, or drag gesture would discard unsaved work.
  • Expanded or compact state when the sheet supports size changes or side placement.
  • Completed state that applies the sheet task and returns users to the parent context.
  • Responsive state that changes placement or size without changing the task contract.

Interaction Contract

  • The opener explains why the sheet appears and which parent object or task it belongs to.
  • Opening the sheet moves focus to the sheet title, first field, or first useful control according to task risk.
  • The sheet title names the child task or selected object rather than saying Sheet.
  • All dismissal routes use the same unsaved-change rule, including close button, Escape, back, scrim or outside click, and drag gesture.
  • Primary and secondary actions stay visible or predictably reachable when sheet content scrolls.
  • Modal sheets make the parent inert and contain focus until the sheet closes.
  • Standard side sheets define how focus moves between the sheet and parent when both remain usable.
  • Closing the sheet returns focus to the opener or the parent object that launched it and preserves parent filters, scroll, and selection.

Implementation Checklist

  • Define whether the sheet is modal, standard, side-attached, window-attached, compact, expanded, or full-screen at each breakpoint.
  • Give the sheet a visible title and wire that title to the accessible name of the surface.
  • Provide a visible close affordance and consistent Escape, back, outside-click, and drag-dismiss behavior.
  • Track dirty state inside the sheet and intercept destructive dismissals with a discard-or-continue decision.
  • Keep primary actions visible, sticky, or reachable when content scrolls.
  • Set initial focus on open and restore focus after save, cancel, discard, Escape, or gesture dismissal.
  • Preserve the parent context that launched the sheet.
  • Test small screens, zoom, long content, swipe or drag dismissal, screen readers, keyboard order, and unsaved edits.

Common Generated-UI Mistakes

  • Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions.
  • Allowing swipe, Escape, outside click, or back to discard unsaved sheet edits silently.
  • Opening a sheet for a tiny sentence of help that belongs in inline text, tooltip, hover card, or popover.
  • Using a dismissible sheet for an urgent mandatory response that needs alert-dialog behavior.
  • Letting a sheet grow into a full workflow without progress, saved state, route history, or shareable location.
  • Leaving background controls focusable behind a modal sheet.
  • Changing sheet size or breakpoint behavior in a way that hides actions or changes the meaning of dismissal.

Critique Questions

  • What child task does this sheet contain, and why is it not a drawer, compact dialog, or page?
  • Which dismissal routes exist, and do they all protect unsaved edits the same way?
  • Is the parent view inert, shareable, or partially visible, and does focus behavior match that choice?
  • Does the sheet title identify the task or selected object?
  • What happens when the sheet is compact, expanded, dragged, closed, or reopened?
  • Would bottom sheet, drawer, modal dialog, alert dialog, popover, or full page better match the content?
Accessibility
  • Give the sheet a visible heading and use it as the accessible name.
  • Expose modal sheets with dialog-like semantics, inert background content, contained focus, and predictable focus return.
  • For standard side sheets, keep focus order understandable between the sheet and parent content.
  • Provide labelled close and back controls, not only a gesture affordance.
  • Announce dirty-state or discard-review messages when dismissal is blocked.
  • Ensure sticky actions, scrollable content, and size changes remain usable at zoom and narrow viewports.
  • Do not rely on drag gestures as the only way to resize or dismiss a sheet.
Keyboard Behavior
  • Enter or Space on the opener launches the sheet.
  • Initial focus moves to the sheet heading, first field, or first meaningful control.
  • Tab moves through sheet controls; modal sheets keep focus inside until close.
  • Escape requests dismissal and, if edits are dirty, opens the same discard review used by close or back.
  • Keyboard users can reach size or expansion controls when the sheet supports them.
  • Save, cancel, discard, or close returns focus to the opener or selected parent object.
Variants
  • Modal sheet
  • Standard side sheet
  • Form sheet
  • Preview sheet
  • Picker sheet
  • Review sheet
  • Compact sheet
  • Expanded sheet
  • Full-screen sheet

Verification

Last verified: