Skip to content
aidsgnaidsgnaidsgn

SideSheet

aidsgn-side-sheet presents a longer modal workflow at the viewport’s logical end edge. It stabilizes its top-layer dimensions before sliding into view and moves to the left in RTL documents without changing source or focus order.

Filters

Refine the visible results without leaving the current page.

<aidsgn-side-sheet id="filters" heading="Filters">
<dialog class="aidsgn-modal aidsgn-side-sheet" aria-labelledby="sheet-heading"><div class="aidsgn-modal__surface"><header class="aidsgn-modal__header"><h2 class="aidsgn-modal__heading" id="sheet-heading">Filters</h2><button class="aidsgn-modal__close" type="button" aria-label="Close filters">×</button></header><div class="aidsgn-modal__body"><p>Refine the visible results.</p><form method="dialog" data-aidsgn-modal-actions><button value="cancel">Cancel</button><button value="apply">Apply filters</button></form></div></div></dialog>
</aidsgn-side-sheet>

SideSheet shares Dialog’s open, heading, close-label, show(), close(), aidsgn-close, and aidsgn-cancel API. Its scrollable body keeps the heading and close control visible, and its dimensions remain stable while it opens and closes.

Holding the authored close button applies shared Press feedback without changing its 44px target. Reduced motion suppresses the scale.

--aidsgn-side-sheet-inline-size defaults to 28rem and never exceeds the viewport. At narrow widths it may cover the viewport, so underlying page content must not be required to complete the modal task.

Usage guidelines

Section titled “Usage guidelines”
A Filters Side Sheet remains beside a recognizable search-results page.A Filters Side Sheet remains beside a recognizable search-results page.
Do

Retain useful page context

Use SideSheet for a supporting task that benefits from keeping the underlying page recognizable.

A Side Sheet titled Edit tags contains only a short tag field and Save tags action.A Side Sheet titled Edit tags contains only a short tag field and Save tags action.
Do

Keep the task narrower than the page

Give the sheet a concise heading and limit it to a focused supporting purpose.

A narrow Side Sheet asks for a critical Delete account confirmation while the underlying page remains visible.A narrow Side Sheet asks for a critical Delete account confirmation while the underlying page remains visible.
Don’t

Avoid context-free confirmations

Use Dialog when a critical confirmation needs complete modal focus rather than visible page context.

A Side Sheet is incorrectly covered by a smaller confirmation Dialog with a second close control.A Side Sheet is incorrectly covered by a smaller confirmation Dialog with a second close control.
Don’t

Never stack modal surfaces

Close the current modal surface before opening another so focus and dismissal remain predictable.