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
RTL Support Example
The Sheet component automatically adapts to RTL layouts. The side properties (start/end) mirror correctly and slide animations flow naturally.
LTR (English)
RTL (العربية)
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