Skip to content

Sheet

Preview Available in release assets

Present a short contextual task from the block-end edge of the viewport.

Sheet in context

Show code
<p><a href="/filters/"  data-dialog-open="filters-sheet">Choose filters</a></p>
<dialog class="thin-sheet" id="filters-sheet" aria-labelledby="filters-sheet-title">
  <header>
    <h2 id="filters-sheet-title">Filters</h2>
    <button class="thin-button" data-variant="quiet" data-size="small" data-icon-only data-dialog-close aria-label="Close panel">
      <svg class="thin-icon" aria-hidden="true">
        <use href="/icons/sprite.svg#x">
        </use>
      </svg>
    </button>
  </header>
  <div data-panel-body class="thin-stack">
    <p>Refine the products shown without losing your place.</p>
    <form id="filter-options">
      <div class="thin-choice-row">
        <input class="thin-choice" id="sheet-stock" type="checkbox" name="stock">
        <label for="sheet-stock">In stock</label>
      </div>
      <div class="thin-choice-row">
        <input class="thin-choice" id="sheet-sale" type="checkbox" name="sale">
        <label for="sheet-sale">On sale</label>
      </div>
    </form>
  </div>
  <footer>
    <form method="dialog">
      <button class="thin-button" value="apply">Show results</button>
    </form>
  </footer>
</dialog>

Anatomy

  • External link or button trigger
  • Labelled native dialog
  • Header and close control
  • Independently scrolling body
  • Optional footer actions

Variants and sizes

  • Bottom sheet
  • Action sheet
  • Filter sheet

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed
  • Open
  • Long content
  • Narrow viewport
  • Right-to-left

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The shared dialog helper calls showModal(), leaves Escape and focus containment to the native dialog, closes through data-dialog-close or method=dialog, and restores focus to a connected opener.

Accessibility

Use aria-labelledby, keep a visible heading, make the close control's accessible name specific, and retain a normal destination or server workflow outside the panel.

Contract
DIALOG
Basis
Native <dialog> with an explicitly chosen modal/non-modal boundary; no drawer-specific APG role
Behavior guarantees
  • Uses native <dialog> and method="dialog"; the trigger helper only coordinates opening, initial focus, and return focus.
  • Rejects ambiguous or unnamed targets and keeps the authored link fallback when modal presentation is unavailable.
  • Focuses an available control on open and restores a connected trigger after close.
Evidence
  • tests/unit/library/drawer-sheet.test.ts
  • tests/unit/library/advanced-component-contracts.test.ts

API

Use dialog.thin-sheet with direct header, [data-panel-body], and optional footer children. Open it with data-dialog-open and load the existing dialog behavior once per document.

Behavior tier: dependency-free

Custom properties

PropertyDefaultDescription
--thin-sheet-sizemin(100vi, 30rem)Inline size of a drawer or slide-over, and the maximum block size of a sheet. Set it on the dialog.

Fallback

Keep the initiating link and essential destination available in the page; the panel is an optional presentation enhancement.

Assets and dependencies

  • /components.css
  • /layouts.css
  • /behaviors.js
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/drawer-sheet/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Used by