Mushilu-San UI

Search components

PlaygroundStorybookGitHub
Feedback

Sheet

A panel that slides in from an edge of the screen for secondary tasks.

Selector: mui-sheet

Import
import { Sheet } from '@mushilu-san/ui/feedback';
PreviewCode

Loading example…

Overview

Sheet is a modal panel anchored to one edge, set with side: start, end, top or bottom. left and right are physical aliases. open is a two-way model.

It traps focus while open, closes on Escape and on the backdrop unless those are turned off, and returns focus to the trigger when it closes.

When to use

  • Filters, details or a settings panel that should not leave the current page.
  • A side panel for editing an item from a list.

When not to use

  • A short confirmation. Use an alert dialog. Use Alert dialog instead.
  • A bottom panel on a phone that a thumb should reach. Use a bottom sheet. Use Bottom sheet instead.

Guidelines

Do

  • Give the sheet a heading that says what it is for.
  • Put the primary action in a footer slot.

Don't

  • Do not nest sheets on top of each other.

Accessibility

Roles and attributes

ElementRoleNotes
paneldialog (modal)aria-modal="true". Named by heading when set.

Keyboard

KeysAction
TabShiftTabCycles focus inside the sheet.
EscapeCloses the sheet when closeOnEscape is on (default).
  • Focus returns to the element that opened the sheet. Give the close button a clear label.

API

Sheet

Selector: mui-sheet

NameTypeDefaultDescription
side'start' | 'end' | 'left' | 'right' | 'top' | 'bottom''right' Edge the sheet slides from: `start`, `end`, `top`, `bottom`, or the physical `left` and `right`. Default `right`.
size'sm' | 'md' | 'lg' | 'full''md' Size along the sheet's main axis: `sm`, `md`, `lg` or `full`. Default `md`.
headingstring | undefined— Heading text. Labels the sheet.
closeOnBackdropbooleantrue Closes the sheet when the backdrop is clicked. Default `true`. Accepts attribute presence, e.g. <… closeOnBackdrop>.
closeOnEscapebooleantrue Closes the sheet on Escape. Default `true`. Accepts attribute presence, e.g. <… closeOnEscape>.
showClosebooleantrue Shows the close button in the header. Default `true`. Accepts attribute presence, e.g. <… showClose>.
NameTypeDefaultDescription
openbooleanfalse Whether the sheet is open. Two-way bindable with `[(open)]`.
NameTypeDescription
openedvoid Emits when the sheet opens.
closedvoid Emits when the sheet closes, however it was closed.

CSS parts

  • ::part(body)
  • ::part(close)
  • ::part(header)
  • ::part(panel)
  • ::part(root)
  • ::part(surface)
  • ::part(title)

Tokens

  • --mui-color-surface-raised
  • --mui-color-border
  • --mui-shadow-5
  • --mui-z-modal
  • --mui-color-focus-ring

Navigation

IntroductionInstallationAll componentsAvatarBadgeButtonDividerIconSpinnerCalendarCheckboxDate pickerForm fieldInputInput groupInput OTPLabelRadioSelectSliderTextareaToggleToggle groupAspect ratioContainerGridResizableScroll areaSidebarSpacerStackBreadcrumbMenubarNav linkNavigation menuPaginationTabsAlertAlert dialogDialogProgressSheetSkeletonToastAccordionCardCarouselChartEmpty stateTableTooltipTypographyBottom sheetFloating action buttonMobile navigationSwipe actionComboboxCommandContext menuDropdown menuHover cardPopover