CONTAINERS AND LAYOUT

Sheet

Draft

A panel overlay that slides in from the bottom or side of the viewport with drag-to-dismiss and snap points.

Usage

Common alternative names

Bottom sheet, side sheet, panel

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

Sheet is built on top of the Drawer component with additional bottom-sheet affordances. Use Drawer with position="bottom" for the foundational behaviour.

import { Drawer } from '@arch-ui/components';

function FilterSheet({ isOpen, onClose }) {
  return (
    <Drawer
      isOpen={isOpen}
      onClose={onClose}
      position="bottom"
      size="24rem"
      aria-label="Filters"
    >
      <div style={{ padding: 'var(--spacing-16)' }}>
        <h2>Filters</h2>
        <p>Filter controls go here.</p>
        <button onClick={onClose}>Apply</button>
      </div>
    </Drawer>
  );
}

---

When to use

• Mobile filters -- present a list of filter controls that the user can dismiss by tapping the overlay or swiping down.
• Detail previews -- show a summary of a selected item without navigating away from a list view.
• Action menus -- on touch devices, a bottom sheet is more thumb-friendly than a dropdown or context menu.
• Side panels -- on larger screens, a sheet sliding from the side can serve as a persistent inspector or properties panel.

---

When not to use

• Dialogs that require an explicit response. Use Modal instead.
• Navigation drawers that persist across pages. Use Drawer with position="start".
• Tooltips or small contextual panels. Use Popover.

---

Anatomy

A typical Sheet contains:

1. Handle (optional) -- a small drag indicator bar at the top that signals the panel can be swiped to dismiss.
2. Header -- a title and optional close button.
3. Content area -- scrollable body for the sheet's primary content.
4. Footer (optional) -- action buttons pinned to the bottom.

---

Bottom sheet pattern

The most common pattern. The sheet slides up from the bottom edge with rounded top corners.

<Drawer isOpen={isOpen} onClose={onClose} position="bottom" size="50vh">
  <div className="sheet-handle" />
  <h3>Select an option</h3>
  <ul>
    <li><button>Option A</button></li>
    <li><button>Option B</button></li>
    <li><button>Option C</button></li>
  </ul>
</Drawer>

---

Side sheet pattern

On tablet and desktop viewports, a side sheet provides an inspector or detail panel that coexists with the main content.

<Drawer isOpen={isOpen} onClose={onClose} position="end" size="24rem">
  <h3>Item details</h3>
  <p>Properties and metadata for the selected item.</p>
</Drawer>

---

Accessibility

• Inherits all Drawer accessibility features: role="dialog", aria-modal="true", focus trapping, scroll lock, and Escape key dismissal.
• If a drag handle is present, ensure it has an accessible label (e.g., aria-label="Drag to resize") and is keyboard operable.
• Provide a clear close affordance (button or overlay tap) in addition to any gesture-based dismissal.