Skip to main content

Sheet

Sheet

Modal panel that slides in from the left, right or bottom edge

Tags: component overlay drawer

View Demo

Sheet is a dialog anchored to an edge of the screen. Use it for secondary surfaces that belong beside the page - version history, filters, an editor's outline or inspector on a phone. It shares Dialog's focus trap, Escape, scrim click and focus return.

Import​

<script>
  import { Sheet } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import { Sheet, Button } from '@classic-homes/theme-svelte';
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Version history</Button>

<Sheet bind:open title="Version history" description="Every save is kept.">
  <ul>...</ul>
  {#snippet footer()}<Button onclick={() => (open = false)}>Done</Button>{/snippet}
</Sheet>

Bottom sheet whose content has its own header:

<Sheet bind:open side="bottom" title="Question settings" hideTitle>
  <StudioInspector title="Question 3">...</StudioInspector>
</Sheet>

Props​

Prop Type Default Description
open boolean false Bindable
onOpenChange (open: boolean) => void - Called when opened or closed
side 'left' | 'right' | 'bottom' 'right' Edge it slides in from
size 'sm' | 'md' | 'lg' 'md' Width of left/right sheets from sm up; phones get full width
title string required Heading and accessible name (required)
hideTitle boolean false Drop the heading row; title still names the sheet
description string - Line under the title
headerActions Snippet - Buttons beside the close button
footer Snippet - Pinned footer
class string - Additional classes for the panel
dirty boolean - Unsaved work inside; scrim click, Escape and the close button ask before discarding it. Unset = auto-detected from edits; false turns the prompt off (details)

Keyboard Navigation​

  • Escape - Close (asks first when there are unsaved edits; Escape again keeps editing)
  • Tab - Cycles inside the sheet while open

Accessibility​

  • Renders a modal dialog named by title (visually hidden with hideTitle).
  • Focus moves into the sheet on open and returns to the trigger on close.
  • Bottom sheets respect the home-indicator safe area.
  • Dialog - Centered modal
  • Studio - Uses sheets for its outline and inspector on small screens
On this page