Sheet

A sheet is a panel that slides in from the edge of the screen. It's a versatile component for displaying supplementary content, forms, or navigation menus without leaving the current context.

Under the Hood

The RzSheet component family uses an Alpine.js component (`x-data="rzSheet"`) to manage its open/close state and user interactions. It leverages data attributes to control its appearance and animations, ensuring a clean separation of concerns and CSP compliance.

Basic Sheet

This example shows a basic sheet that slides in from the right, which is the default behavior. Click the trigger button to open it.

Source

<RzSheet>
    <SheetTrigger AsChild>
        <RzButton Variant="ThemeVariant.Primary">Open Sheet</RzButton>
    </SheetTrigger>
    <SheetContent>
        <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>
                Make changes to your profile here. Click save when you're done.
            </SheetDescription>
        </SheetHeader>
        <div class="grid gap-4 py-4 px-6">
            <div class="grid grid-cols-4 items-center gap-4">
                <label for="name" class="text-right">Name</label>
                <input id="name" value="Michael Tanczos" class="input col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <label for="username" class="text-right">Username</label>
                <input id="username" value="@jalexsocial" class="input col-span-3" />
            </div>
        </div>
        <SheetFooter>
            <SheetClose AsChild>
                <RzButton Variant="ThemeVariant.Primary">Save changes</RzButton>
            </SheetClose>
        </SheetFooter>
    </SheetContent>
</RzSheet>

Side Variations

Use the `Side` parameter on the `SheetContent` component to control which edge of the screen the sheet appears from.

Source

@foreach (var side in Enum.GetValues<SheetSide>())
{
    <RzSheet>
        <SheetTrigger AsChild>
            <RzButton Variant="ThemeVariant.Secondary">@side</RzButton>
        </SheetTrigger>
        <SheetContent Side="side">
            <SheetHeader>
                <SheetTitle>Sheet from the @side.ToString().ToLower()</SheetTitle>
                <SheetDescription>
                    This is a demonstration of a sheet sliding in from the @side.ToString().ToLower().
                </SheetDescription>
            </SheetHeader>
        </SheetContent>
    </RzSheet>
}

Accessibility

RzSheet supports modal and non-modal modes. Modal mode uses role="dialog" with aria-modal="true", traps focus with focusScope, and restores focus to the trigger after close. Non-modal mode uses role="complementary", omits aria-modal, and does not trap focus.

For accessible names, use SheetTitle (automatic aria-labelledby) or provide AriaLabel on SheetContent. Use SheetDescription (or AriaDescribedBy) to provide additional context.

Key	Modal	Non-Modal
`Enter / Space`	Opens from trigger; closes from close button.	Opens from trigger; closes from close button.
`Tab / Shift+Tab`	Wraps within sheet content while open.	Moves through full page tab order.
`Escape`	Closes top-most sheet via `dismissableLayer`.	Closes top-most sheet via `dismissableLayer` when dismissal is enabled.

Known limitation: nested sheets and mixed modal/non-modal stacking are not fully supported yet.

Component Parameters

The following tables summarize the parameters for each component in the Sheet family.

RzSheet

Property	Description	Type	Default
`ChildContent`	The content of the sheet, which should include a `SheetTrigger` and a `SheetContent`.	`RenderFragment`	Required
`DefaultOpen`	If set to `true`, the sheet will be open by default.	`bool`	`false`
`Modal`	Controls sheet semantics and focus behavior. When `true`, the sheet behaves as a modal dialog with focus trapping.	`bool`	`true`
`DismissOnOutsideClick`	When `true`, pointer interactions outside the sheet dismiss it.	`bool`	`true`
`AriaLabel`	Accessible name fallback when no `SheetTitle` is rendered.	`string?`	`null`
`AriaLabelledBy`	Explicit ID reference for `aria-labelledby`.	`string?`	`auto from SheetTitle`
`AriaDescribedBy`	Explicit ID reference for `aria-describedby`.	`string?`	`auto from SheetDescription`

SheetTrigger & SheetClose

Property	Description	Type	Default
`ChildContent`	The content to be rendered as the trigger or close element.	`RenderFragment`	Required
`AsChild`	If set to `true`, the component will merge its properties and behavior into its first child element instead of rendering its own wrapper.	`bool`	`false`

SheetContent

Property	Description	Type	Default
`ChildContent`	The content to be displayed inside the sheet panel.	`RenderFragment`	Required
`Side`	The side from which the sheet will appear. Options are `Top`, `Right`, `Bottom`, `Left`.	`SheetSide`	`SheetSide.Right`

SheetHeader, SheetFooter, SheetTitle, SheetDescription

These components primarily accept ChildContent and pass through any additional attributes. They have no unique parameters beyond standard HTML attributes.

Alpine API

This page uses the rzSheet Alpine x-data component.

Method	Parameters	Description
`toggle`	`—`	Toggles sheet visibility.
`show`	`—`	Shows the sheet.
`close`	`—`	Closes the sheet.