Sheet

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?