Sheet

Usage examples

import { Button, Field, FieldLabel, Input, Sheet, SheetBody, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@rookcom/monarch-react';

// FilterIcon: demo icon from the docs site; use your own.

<Sheet>
  <SheetTrigger asChild>
    <Button leadingIcon={<FilterIcon />}>Filters</Button>
  </SheetTrigger>
  <SheetContent
    side="left"
    size="sm"
    closeOnOutsideClick={false}
    footer={
      <>
        <SheetClose asChild>
          <Button>Cancel</Button>
        </SheetClose>
        <Button variant="primary">Apply</Button>
      </>
    }
  >
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
    </SheetHeader>
    <SheetBody>
      <Field>
        <FieldLabel>Assignee</FieldLabel>
        <Input placeholder="Anyone" />
      </Field>
    </SheetBody>
  </SheetContent>
</Sheet>

import { Button, Field, FieldLabel, Input, Sheet, SheetBody, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@rookcom/monarch-react';

<Sheet>
  <SheetTrigger asChild>
    <Button>Share</Button>
  </SheetTrigger>
  <SheetContent side="bottom" size="sm">
    <SheetHeader>
      <SheetTitle>Share board</SheetTitle>
      <SheetDescription>Anyone with the link can view.</SheetDescription>
    </SheetHeader>
    <SheetBody>
      <Field>
        <FieldLabel>Link</FieldLabel>
        <Input readOnly value="https://example.com/b/q3-launch" />
      </Field>
    </SheetBody>
  </SheetContent>
</Sheet>

Purpose

A modal panel attached to an edge of the screen: a record’s details next to the list it came from, filters, a longer form, or navigation on a phone. It keeps the page in view while focus stays in the panel.

Design principles

• A sheet is a dialog: one title, focus trapped inside, Escape closes it, focus returns to the trigger.
• Header and footer stay put; only SheetBody scrolls, so actions are always reachable.
• Side sheets never exceed the screen width, and every edge that touches the screen pads for notches and home bars.
• Calm surface: the raised background, one border on the inner edge and the standard overlay.

API reference

import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@rookcom/monarch-react';

Sheet, SheetTrigger and SheetClose are the Radix Dialog Root, Trigger and Close.

SheetContent renders in a portal with the overlay and an optional built-in close button.

SheetHeader, SheetTitle, SheetDescription, SheetBody and SheetFooter build on the Dialog parts, so typography and spacing match Dialog.

Generated from the TypeScript declarations of packages/react/src/components/overlays/sheet.

Properties

busy, closeOnOutsideClick, escapeGuard and footer behave exactly as on DialogContent.

Pass modal={false} to Sheet for a panel that leaves the page interactive (no overlay, no scroll lock, no focus trap).

Variants

States

Interaction behaviour

• Opening moves focus into the sheet; Tab and Shift+Tab stay inside it.
• The page behind does not scroll while a modal sheet is open.
• Escape, the close button, a SheetClose or a click on the overlay closes it; focus returns to the trigger.
• closeOnOutsideClick={false} keeps it open on an overlay click (forms with typed values).
• Controlled with open + onOpenChange (for example from a URL parameter), or uncontrolled.

Keyboard support

Accessibility

Role

dialog (aria-modal)

Accessible name

SheetTitle; SheetDescription becomes the accessible description.

• Content outside the sheet is hidden from assistive technology while open (Radix).
• The built-in close button is named by closeLabel (default "Close") and is disabled while busy.
• The grab handle is aria-hidden; it is not a control.

Responsive behaviour

• Side sheets are min(size, 100vw) wide: on a phone a md sheet fills the width.
• Top and bottom sheets span the width and grow with their content up to the size cap; the body scrolls beyond that.
• Padding follows env(safe-area-inset-*) on every edge that touches the screen.
• Height uses dvh, so mobile browser bars do not hide the footer.

Theme support

• Raised surface, subtle border, overlay scrim and shadow tokens; light, dark and more-contrast themes apply automatically.
• The slide-in uses duration tokens, which are 0ms under prefers-reduced-motion.

Do and don't

Related components

• Dialog: Centred modal for short tasks; Sheet builds on its parts.
• ResponsiveDialog: A Dialog on wide screens that becomes a bottom sheet on phones.
• SplitLayout: A persistent side pane that is part of the page, not modal.

Dependencies

Reuses the .mn-overlay scrim and .mn-dialog__close button styles from dialog.css.

Dismissal rules are shared with Dialog through src/internal/dismiss.ts.

Testing coverage

• Opens from its trigger, traps focus, closes on Escape and restores focus; axe passes on the open sheet.
• Opens from the keyboard; a SheetClose closes it.
• Locks page scroll while open.
• Closes on an overlay click unless closeOnOutsideClick={false}.
• busy blocks every dismissal and disables the close button.
• Controlled through open + onOpenChange; side and size are exposed as data attributes.
• Grab handle on bottom sheets only, removable with handle={false}.
• footer prop and closeLabel={null}.
• Non-modal sheets render no overlay and no scroll lock.
• Renders on the server (closed and open).

Tests: packages/react/src/components/overlays/sheet