Sheet

The Sheet component displays a panel that slides in from the edge of the screen. It’s designed to provide extra information or actions without cluttering the main interface.

A Sheet is often used for details, settings, or supplementary content.

Anatomy

A Sheet is made up of the following parts:

SheetOpen – The element that triggers the sheet to open.
SheetOverlay – A background overlay that appears when the sheet is open.
- SheetContent – The main container for the sheet’s content.
  - SheetTitle – Displays the title of the sheet.
  - SheetDescription – Provides a brief description or additional details.
  - SheetClose – The control to close the sheet.

Adding a Sheet

To add a Sheet to your project:

Insert the Sheet component from the Library.
Update its content:
- Edit the SheetTitle to reflect its purpose.
- Update the SheetDescription with a brief explanation or instructions.
- Remove any unnecessary components from the SheetContent and insert your desired elements (for example, a Form, Text, or Image) to build your custom layout.

Guides

Configuring the Sheet Side

By default, the sheet appears from the right side. To change this:

Select the SheetContent component.
In the Properties Panel, update the side property to the desired value (e.g., top, bottom, left, or right).

Adjusting the Sheet Size

Control the size of the sheet to fit your design requirements:

Select the SheetContent component.
In the Properties Panel, adjust the width, max-width, and height as needed.

Hiding the Title

For accessibility, a title is recommended, but you may choose to hide it visually:

Select the SheetTitle component.
In the Properties Panel, add the sr-only utility class to hide the title while keeping it accessible for screen readers.

Styling the Sheet

You can customize the appearance of your Sheet by styling both the trigger element and the content area. Here's how to adjust each element in the Properties Panel:

SheetOpen: Adjust the button’s text, background, border, and spacing settings to fit your design. You can also replace the button with a custom component for your trigger.
SheetContent: Adjust settings such as background color, borders, padding, and any other styles. Additionally, you can style the inner components (like SheetTitle and SheetDescription) to control typography, spacing, and other visual details.

Properties

Sheet

Property	Type	Description	Description
defaultOpen	`boolean`	`false`	Determines whether the sheet is open or closed when it is initially rendered.
modal	`boolean`	-	When set to `true`, interactions with outside elements will be disabled and only the sheet content will be visible to screen readers.
onOpenChange	`Action`	-	Triggers when sheet is opened or closed

SheetContent

Property	Type	Description	Description
side	`‘top’	‘bottom’	‘left’
onEscapeKeyDown	`Action`	-	Callback when the Escape key is pressed.
onPointerDownOutside	`Action`	-	Callback when a click is detected outside the sheet content.
onFocusOutside	`Action`	-	Callback when focus moves outside the sheet content.
onInteractOutside	`Action`	-	Called when an interaction (pointer or focus event) happens outside the bounds of the component.
onCloseAutoFocus	`Action`	-	Event handler called when auto-focusing on close (can be prevented)