Sheet
A component for displaying a sheet.
A panel that slides out from the edge of the screen.
When To Use
- When you need a panel that slides in from the edge of the viewport
- For creating side navigation menus, filter panels, or configuration panels
- To display additional information without navigating away from the current view
- When you need a mobile-friendly alternative to modal dialogs
Examples
A basic Sheet component with a trigger button, content, and action buttons.
A Sheet component with different side options (top, right, bottom, left).
A Sheet component that contains a form for user input.
A Sheet component with custom styling and behavior.
Props
Sheet
| Prop | Type | Default |
|---|---|---|
displayName? | string | - |
propTypes? | any | - |
SheetTrigger
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
SheetContent
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
SheetHeader
| Prop | Type | Default |
|---|---|---|
displayName | string | - |
SheetFooter
| Prop | Type | Default |
|---|---|---|
displayName | string | - |
SheetTitle
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
SheetDescription
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
SheetClose
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
Accessibility
The Sheet component follows WAI-ARIA guidelines for dialog components:
- Uses
role="dialog"for the sheet - Supports keyboard navigation for opening, closing, and interacting with the sheet
- When opened, focus is trapped within the sheet until it is closed
- The
Escapekey closes the sheet - Uses aria-labelledby and aria-describedby to provide context for screen readers