What is a bottom sheet in UX design?
A bottom sheet is a UI component that slides up from the bottom of the screen to present additional content, a list of actions, a short form, or navigation options without leaving the current screen. Bottom sheets originate from mobile design patterns and have become standard in native mobile applications on both iOS and Android. They can be modal, blocking interaction with the content behind them until dismissed, or non-modal, allowing users to interact with both the sheet and the content behind it simultaneously.
When should you use a bottom sheet vs a modal?
Bottom sheets are more natural than center-screen modals on mobile because they appear from the bottom of the screen where the user's thumb naturally reaches, consistent with Fitts's law. They work well for contextual action menus, sharing options, filter panels, and short forms that relate to the current screen content. Modals are more appropriate for critical alerts, confirmations, or interactions that are not specifically tied to the position on the current screen. On desktop, bottom sheets are unusual and center-screen modals or side drawers are more conventional.
How to design an accessible bottom sheet?
Bottom sheets must be accessible to keyboard users even in mobile web contexts. The sheet must trap focus while open so keyboard users cannot interact with content behind it. A visible drag handle communicates that the sheet can be dismissed by dragging down. Pressing Escape or swiping down should dismiss the sheet. When the sheet opens, focus should move into it. When it closes, focus should return to the trigger element. The sheet must be announced to screen readers with an appropriate role and label.