Extends the Dialog component to display content that complements the main content of the screen.
Use the side prop on SheetContent to set which edge the sheet slides in from.
Set showCloseButton to false to hide the default close button.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. Supports v-model:open. |
| Event | Description |
|---|---|
update:open | Fires when the sheet opens or closes. |
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | Edge the sheet slides in from. |
showCloseButton | boolean | true | Show the ✕ button in the top-right corner. |
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merge props onto the child element. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Esc | Closes the sheet. |
| Tab | Focus is trapped inside the sheet while open. |