Sheet

Slide-out panel modal extending the Dialog primitive. Slides from a configurable edge (top, right, bottom, left) and uses the native <dialog> element for accessibility. Brand-new v0.2.1 primitive distinct from Dialog.

Import

use maud_ui::primitives::sheet::{self, Side, Props};

Example

use maud::html;
use maud_ui::primitives::sheet;

html! {
    (sheet::trigger("edit-profile", "Open sheet"))
    (sheet::render(sheet::Props {
        id: "edit-profile".to_string(),
        title: "Edit Profile".to_string(),
        description: Some("Update your personal information.".to_string()),
        children: html! {
            div class="mui-field" {
                label class="mui-label" { "Name" }
                input class="mui-input" type="text" {}
            }
        },
        footer: Some(html! {
            button class="mui-btn mui-btn--primary" { "Save" }
        }),
        side: sheet::Side::Right,
        show_close_button: true,
        open: false,
    }))
}

Props

Side Enum

Helpers

trigger

sheet::trigger(target_id: &str, label: &str) -> Markup

Renders a button that opens the sheet with the given target_id. Emits data-mui="dialog-trigger" (reuses dialog behaviour).

close_button

sheet::close_button(label: &str) -> Markup

Renders a close button for use inside the sheet body. Typically rendered by render() automatically if show_close_button: true, but available for custom layouts.

render

sheet::render(props: Props) -> Markup

Renders the sheet dialog element with all accessibility attributes wired up.

Accessibility

• Sheet uses native <dialog> element with role="dialog".
• aria-labelledby points to the sheet title; aria-describedby points to the description (if present).
• Close button labeled "Close" by default.
• Focus is managed by the browser's native <dialog> behaviour; CSS animates the slide transition.
• Tab order is trapped within the open sheet.

CSS Classes

Related

Dialog, Drawer, AlertDialog.

Shadcn reference

https://ui.shadcn.com/docs/components/base/sheet