Use full-screen takeover for a temporary mode that needs the entire viewport but must return to the invoking context, modal dialog for compact blocking tasks, sheet for adaptive child tasks, and single-page form for routable standalone completion.
Use full-screen takeover for a temporary mode that needs the entire viewport but must return to the invoking context, modal dialog for compact blocking tasks, sheet for adaptive child tasks, and single-page form for routable standalone completion.
Practice the judgment: Imagine this situation: Close and Back mean different things inside the takeover, causing users to exit the entire flow when they meant to return one internal step. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Full-screen takeover | Modal dialog | Sheet | Single-page form |
|---|---|---|---|---|
| UI or UX | UI + UX - Temporary full-viewport modal task mode | UI + UX - Focused modal task layer | UI + UX - Adaptive temporary sheet for a context-bound child task | UI + UX - Short related multi-field submission page |
| UI guidance | Render a full-screen takeover as a full-viewport modal surface with a visible title, labelled exit control, primary outcome action, and blocked parent content. | Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries. | 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. | Render a clear form heading, short instruction, required or optional indicator explanation, grouped related fields, one primary submit action, and a visible error summary only after failed submit. |
| UX guidance | Use the takeover only when full-viewport focus materially improves the temporary task and users must return to the invoking context afterward. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes. | Use a single-page form when users benefit from seeing, comparing, and editing a small related set of fields before one submission. |
| Good UI | A document scan opens a full-screen capture mode with title Attach receipt, Close, Save scan, internal Review back behavior, and the parent expense row restored after close. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | 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 contact-details form shows one heading, a required-field note, grouped name and contact fields, communication preference radios, aligned field errors, and a Save details button at the end. |
| Bad UI | A full-screen layer titled Details hides the page, offers only an X, and behaves differently from browser back. | A vague popup titled Popup floats over active page controls and offers only OK. | A swipe-dismiss sheet contains unsaved form fields but disappears immediately when the user drags or presses Escape. | A long application with eligibility, address history, uploads, and payment fields is dumped onto one scrolling page. |
| Good UX | A user opens camera capture from an expense row, moves to Review, uses Back to return to Capture, presses Close, sees an unsaved-scan review, keeps editing, saves, and returns to the same row. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | 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. | A user reviews all contact details before submitting because the fields are short, related, and visible in one scan. |
| Bad UX | A user presses the visible X inside a nested takeover and loses the entire product-selection flow rather than only the current detail view. | Users can click background Delete or Navigate controls while the modal is still open. | The sheet blocks the queue even though the user's main task is comparing records, or it contains full navigation that should belong elsewhere. | A validation failure clears completed fields, forcing the user to re-enter unrelated information. |
| Best fit | A temporary task needs the whole viewport for capture, immersive preview, focused setup, scanning, or dense editing. | A short task must interrupt normal page interaction but should return users to the same context afterward. | The surface needs adaptive size, edge attachment, drag or detent behavior, or a clear temporary child-task mode. | A compact set of related fields should be reviewed together before one submit. |
| Avoid when | The task is short enough for a compact modal dialog. | The workflow is long, multi-step, shareable, or needs browser navigation. | The content is mainly destination navigation. | The form is long, high-stakes, branched, or too hard to recover from on one page. |
| Required state | Closed parent state with the selected object, filters, scroll, and opener visible. | Closed page state with an obvious invoking control. | Closed parent state with an opener tied to the object, field, or task that launches the sheet. | Initial empty state with form heading, instruction, required or optional indicator explanation, grouped fields, and submit action. |
| Accessibility burden | Expose the takeover as a modal surface with an accessible name from the visible title. | Use dialog semantics with an accessible name from the visible title. | Give the sheet a visible heading and use it as the accessible name. | Keep field order in the DOM the same as the visible order. |
| Common misuse | Using a full-screen takeover as a dramatic wrapper for a short confirmation, single text field, or routine message. | Using a modal as a generic container for routine information that could stay inline. | Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions. | Using one page for a long complex application just to avoid designing steps. |