Behavior comparison
Choose Bottom sheet for: Showing place details over a mobile map. Choose Drawer for: Editing filters without leaving results.
| Dimension | Bottom sheetBottom sheet | DrawerDrawer |
|---|---|---|
| Trigger | A tap opens the sheet; dragging its handle may then change its detent. | An explicit button opens a temporary task or navigation panel. |
| Modality | Often modal when expanded, with the background inert behind an overlay. | Can be modal or non-modal; the specimen is modal when the page behind it is inert. |
| Placement | Attached to the bottom edge and optionally stops at defined heights. | Slides from a side edge and remains attached to that edge. |
| Interactivity | Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture. | Contains navigation or task controls, with focus contained only in the modal form. |
| Focus | Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing. | Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener. |
| Dismissal | Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back. | The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes. |
| Accessible role | dialog with aria-modal=true while the sheet makes the furniture results inert | dialog with aria-modal=true for the modal specimen |
| Use case | Showing place details over a mobile map | Editing filters without leaving results |
| Mobile behavior | Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior. | Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model. |