Sheet is a page-blocking content container intended for focused, fleeting workflows or tasks.
Overview
Sheet provides an ephemeral container for focused workflows and tasks, while preventing interaction with the main application content through the use of a page-blocking Scrim.
Usage
- Display focused, ephemeral content to a user
- Present short dialogues or choice sets to a user
- Contain navigation and menu regions, administrative or platform settings
Sample
Best practices
While visually similar to the Shell Panel and Modal components, Sheet has distinct capabilities and intended use cases.
The primary difference is in each's ephemerality - Sheet and Modal should command the attention of the user for a focused task - preventing interaction with other application content while open - before being dismissed.
Conversely, Shell Panels can be open and persist in that way indefinitely - in some cases never being collapsed. Shell Panels should be displayed alongside visible and interactive primary application content.
Modal should be used for complex, multi-step interactions and workflows invoked from the primary application. Sheet should be used for more ephemeral but still focused interactions like navigating menus, displaying user or platform settings, or presenting brief choices or decisions to a user.
Recommendations
It is common to use a Sheet in the block-end value of position when presenting users options in a narrow viewport - often on a mobile device. At a larger viewport width, you may wish to provide this in an inline-start or inline-end position.
To limit the height of the component while position is "block-start" or "block-end" you can use the --calcite-shell-height, --calcite-shell-min-height, --calcite-shell-max-height css variables. While position is "inline-start" or "inline-end" position, you can instead adjust the width via --calcite-shell-width, --calcite-shell-min-width, --calcite-shell-max-width css variables.
"position" and displayMode based on viewport size.Accessibility
It is strongly recommended to have focusable elements cycle through Sheet where focus is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element and focus is false, focus will cycle to the first element. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element and focus is false, focus will cycle to the last element. |
Esc | If escape is false, closes the component. |