--- title: "Sheet" description: "A dialog that slides in from an edge of the screen, for content that complements the page: settings, filters, details or navigation." url: "https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/sheet" section: "Components" --- # Sheet A dialog that slides in from an edge of the screen, for content that complements the page: settings, filters, details or navigation. ```html

Edit profile

Make changes to your profile here. Click save when you're done.

 ``` ## Markup A sheet is a native `` with `.sheet` and `data-dialog`. It is a [dialog](https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/dialog) in every way but its place on the screen: it opens and closes the same ways, puts the rest of the page out of reach while it is open, and works with htmx the same way. Instead of appearing in the middle, it fills one edge of the screen and slides in from it. - `.sheet-header` holds `.sheet-title` and `.sheet-description`. Point `aria-labelledby` and `aria-describedby` at them. - `.sheet-content` is an optional body that takes the free height and scrolls on its own, keeping the header and footer in view. - `.sheet-footer` sits at the bottom: its buttons stacked, the last one on top. - `.sheet-close` is the corner close button. It is optional. The sheet has its own `.sheet-*` parts rather than the dialog's: they are laid out for a tall, narrow panel (left-aligned header, footer pinned to the bottom, wider padding for the scrollbar). Use `.sheet` on its own, not together with `.dialog`. ## Opening and closing Exactly as for a [dialog](https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/dialog#open-and-close): a button with `commandfor=""` and `command="show-modal"` opens it, or `sheet.showModal()` from script. `Esc`, a click outside, any element inside with `data-dialog-close`, a `
` or `command="close"` closes it, and the native `close` event fires on the `` with the answer in `returnValue`. ## Sides A sheet opens on the right. `.sheet-left`, `.sheet-top` and `.sheet-bottom` attach it to another edge (`.sheet-right` names the default). Left and right sheets are full height, three quarters of the screen wide and at most `max-w-sm`; top and bottom sheets are full width and as tall as their content, up to the viewport height less a margin. ```html

Edit profile

This sheet opens from the top.

Edit profile

This sheet opens from the right.

Edit profile

This sheet opens from the bottom.

Edit profile

This sheet opens from the left.

 ``` ## Sizes `.sheet-sm`, `.sheet-lg` and `.sheet-xl` set the width of a left or right sheet: `max-w-xs`, `max-w-lg` and `max-w-2xl` (the default is `max-w-sm`). Any `max-w-*` utility works too, and on a top or bottom sheet an `h-*` utility fixes its height. ```html

Small sheet

.sheet-sm is max-w-xs.

Extra large sheet

.sheet-xl is max-w-2xl.

Half-height sheet

A bottom sheet with h-1/2.

 ``` ## No close button Leave out `.sheet-close` for a sheet that closes with `Esc`, a click outside or a button of your own. ```html

No close button

Press Escape, click outside or use the button below.

 ``` ## Scrolling content Long content goes in `.sheet-content`, which scrolls between a header and footer that stay in view. `.sheet-footer-sticky` sets the footer apart: tinted, edge to edge, with a border on top. ```html

Release notes

What changed in the last ten releases.

Version 0.10.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.9.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.8.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.7.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.6.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.5.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.4.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.3.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.2.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

Version 0.1.0

Components inside fragments initialise as soon as htmx inserts them. Tokens drive every colour, in light and dark. Dialogs, sheets and drawers share one behaviour.

 ``` ## Navigation A left sheet makes a menu for small screens. The links are ordinary links in a `