Sheet
Extends the Dialog component to display content that slides in from the edge of the screen.
Preview
Installation
Usage
Examples
Different Sides
With Form
Props
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "start" | "end" | "end" | The side from which the sheet slides in |
Accessibility
Keyboard Navigation
- Esc - Close the sheet
- Tab - Navigate between focusable elements within the sheet
ARIA Attributes
- role="dialog" on the sheet content
- aria-describedby links to the description
- aria-labelledby links to the title
- Focus is trapped within the sheet when open
- Focus returns to trigger element when closed
RTL Support
The Sheet component is fully RTL-compatible with automatic side adaptation.
- side="start" automatically positions on the right in RTL mode
- side="end" automatically positions on the left in RTL mode
- Slide animations follow the correct direction
- Close button positions correctly
- Content layout respects text direction