Sheet
Extends the Dialog component to display content that complements the main content of the screen.
AsChild Pattern
Use AsChild to compose triggers with your own styled Button components.
Without AsChild
SheetTrigger renders its own button with inline classes.
With AsChild
Button receives trigger behavior via TriggerContext.
Side: Right (Default)
A sheet that slides in from the right side of the screen.
Side: Top
A sheet that slides in from the top of the screen.
Side: Bottom
A sheet that slides in from the bottom of the screen.
Side: Left
A sheet that slides in from the left side of the screen.
Controlled Sheet
Control the sheet state programmatically with bind-Open two-way binding.
Without Close Button
Hide the default close button using ShowClose="false".
Custom Width
Customize the sheet width using the Class parameter.
Features
- Slides in from any side (top, right, bottom, left)
- Full keyboard navigation support
- Focus is automatically trapped within the sheet
- Can be controlled or uncontrolled
- Manages screen reader announcements with ARIA
- Scroll lock on body when sheet is open
- Smooth slide animations with fade overlay
- Respects prefers-reduced-motion
Different Sides
Use the Side parameter to control which edge the sheet slides in from.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Side | SheetSide | Right | Which side the sheet slides in from. Options: Left, Right, Top, Bottom. |
| Open | bool | false | Controlled open state. Use @bind-Open for two-way binding. |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| ShowClose | bool | true | Whether to show the default close button in the top-right corner. |
| Class | string? | null | Additional CSS classes for SheetContent (controls width/height). |
| ChildContent | RenderFragment? | null | Content of the component. |