Skip to content
Bitsy UI 0.x
Theme
Menu: Sheet
  1. Docs
  2. Bits

Sheet

Sheet runs a side task in a modal panel that slides in from an edge. It has one root hook, six part hooks, a side hook, two sizes, and no JavaScript: a native dialog opened by invoker commands.

Public web API

A native <dialog> with one root hook, part hooks for the header, body, and footer, and a Button with commandfor and command="show-modal" to open it.

<dialog data-bitsy-sheet id="invoice-sheet" aria-labelledby="invoice-sheet-title" closedby="any">
  <header data-bitsy-sheet-header>
    <h2 data-bitsy-sheet-title id="invoice-sheet-title">Invoice #1042</h2>
    <p data-bitsy-sheet-description>Issued 12 October to Atlas Inc.</p>
    <button data-bitsy-sheet-close type="button" commandfor="invoice-sheet" command="close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg></button>
  </header>
  <div data-bitsy-sheet-body>
    <p>Total due: $1,240.00</p>
  </div>
  <footer data-bitsy-sheet-footer>
    <button data-bitsy-button type="button" commandfor="invoice-sheet" command="close">Close</button>
    <button data-bitsy-button data-bitsy-variant="accent" type="button">Save</button>
  </footer>
</dialog>
  • Always set aria-labelledby to the title; the title is a real heading.
  • data-bitsy-side="start" | "bottom" picks the edge (omit for end); data-bitsy-size="lg" widens it.
  • Keep the footer outside the body so it stays visible while the body scrolls.
  • For a short confirmation use Dialog; for a small anchored panel use Popover.

Try it

Open each sheet with the keyboard: Enter or Space opens, Tab stays inside, Escape closes, and focus returns to the button.

Invoice #1042

Issued 12 October to Atlas Inc.

Total due: $1,240.00

Filters

Narrow the list.

Wide sheet

36rem wide, for richer content.

Use lg for forms with two columns.

Terms of service

The body scrolls on its own.

Line item 1. Scrolling content stays in the body while the header and footer remain visible.

Line item 2. Scrolling content stays in the body while the header and footer remain visible.

Line item 3. Scrolling content stays in the body while the header and footer remain visible.

Line item 4. Scrolling content stays in the body while the header and footer remain visible.

Line item 5. Scrolling content stays in the body while the header and footer remain visible.

Line item 6. Scrolling content stays in the body while the header and footer remain visible.

Line item 7. Scrolling content stays in the body while the header and footer remain visible.

Line item 8. Scrolling content stays in the body while the header and footer remain visible.

Line item 9. Scrolling content stays in the body while the header and footer remain visible.

Line item 10. Scrolling content stays in the body while the header and footer remain visible.

Line item 11. Scrolling content stays in the body while the header and footer remain visible.

Line item 12. Scrolling content stays in the body while the header and footer remain visible.

Line item 13. Scrolling content stays in the body while the header and footer remain visible.

Line item 14. Scrolling content stays in the body while the header and footer remain visible.

Native behavior

  • The browser provides the top layer, the backdrop, the inert page behind, Escape to close, and focus return.
  • start and end follow the writing direction, and the slide flips with it.
  • The slide takes 200ms; under prefers-reduced-motion: reduce it is a short fade.
  • closedby="any" closes on a backdrop click; Safari ignores it and keeps Escape and the close button.

Foundation versus Bit

The foundation does not style <dialog>. data-bitsy-sheet adds edge placement, full-height layout, slide motion, and the parts. It is its own Bit and shares no CSS with Dialog. Sheet ships no JavaScript.

Bitsy UI is MIT licensed. Source on GitHub.