On this page
Overview
Show code, FilterPanel.tsx
Variants
Sides
The end is the right edge in left-to-right text, and the left in right-to-left text.
- From the end
Details, settings, filters and inspectors. The default.
- From the start
Panels about what sits at the start of the page.
- From the bottom
A short set of choices or actions.
Choices from the bottom
A sheet from the bottom is as tall as its content.
Still picture, not live
Show code, ShareChoices.tsx
Widths
A medium side sheet takes the whole width of a compact window, and a large one of a compact or medium window.
- A bottom sheet is as wide as the window, up to a comfortable reading width.
- Medium
Details and filters. The default.
- Large
Tables, comparisons and longer forms.
Anatomy
Sheet
Title
Description
Close button
Content
Action
Show code, SheetAnatomy.tsx
Behaviour
A dialog at the edge
A sheet has a dialog's surface, title, description and actions.
- On a touch screen a swipe toward its edge closes it too.
- A mouse or a pen never moves the sheet, and a drag inside it selects text.
- In a sheet too short for all it holds, its content scrolls between the title and the actions, which stay in view.
- A sheet is on the navigation's color, so a NavigationDrawer in it looks as it does at the window's edge; its fill and the backdrop set it apart.
Inspector beside the page
The page can stay usable beside the sheet.
- The sheet then stays open while people choose another row.
- When it closes, focus returns to the row it showed last.
Show code, InspectorPanel.tsx
Resizable
People can resize a side sheet by its inner edge, by pointer or with the arrow keys, with the same grip as between Panes.
- It stays between a smallest and a largest width, and never grows past the window.
Show code, ResizableDetails.tsx
Rules
A sheet is named after what it holds, and shows one level at a time.
Use it when
- An item's details or settings, beside the list they belong to
- Filters for a list or a table, applied on closing
- A short set of choices from the bottom, such as the ways to share
Names
Name the sheet after what it holds, such as Filters or Alex Morgan.
Closing
Keep its close button unless another control in the sheet closes it.
One level
Show the next level inside the sheet rather than opening another.
Accessibility
| Key | Action |
|---|---|
| Enter or Space on the trigger | Opens the sheet and moves focus into it. |
| Tab, Shift+Tab | Moves through the sheet; a modal sheet keeps focus inside, a non-modal one lets it go on. |
| Esc | Closes the sheet, or first what is open inside it; nothing while its work runs. |
| Enter or Space on a close button | Closes the sheet; focus returns to the trigger, or where the application sends it. |
| ←, → on the resize handle | Resizes a resizable side sheet a little; further with Shift. |
| Home, End on the resize handle | Resizes it to its smallest or largest width. |