pattern-library 2 linked patterns checked
Material Design 3 Side sheets
Defines side sheets as secondary content surfaces anchored to the side of the screen, with standard and modal variants.
Read with a purpose
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Details panel | Choose details panel when a selected object needs durable side-by-side inspection while users browse neighboring objects. | Selecting an object updates both the source selection indicator and the details panel title. | Supports secondary side surfaces with standard and modal variants. |
| Sheet | 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. | The opener explains why the sheet appears and which parent object or task it belongs to. | Material side sheet guidance supports standard and modal edge-attached sheet variants. |
Comparisons supported by this source
- Details panel vs drawer vs hover card vs accordion
Material side-sheet guidance supports secondary side surfaces and standard versus modal side treatment.
- Sheet vs drawer vs modal dialog vs alert dialog
Material side sheet guidance supports the standard versus modal distinction for edge-attached secondary surfaces.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Material Design. Last checked: .