Components

AlertAutocompleteAvatarBadge & PillButtonCheckboxComboboxCorner DialogDialogFile UploaderFilepickerForm FieldGroupMenuOverlayPaginationPopoverPortalPositionerPulsarRadioSearch InputSelectSelect MenuSide SheetSpinnerStatus IndicatorSwitchTabTableTag InputText InputTextareaToasterTooltip

Side Sheet

The Sidesheet component is used to show more details about an object.

Open in GitHub
DetailsProperties

Introduction

The SideSheet component is a panel overlaying the screen on the right side. It is used to show more details about a certain object or person. A SideSheet is often triggered by clicking a row in a table.

Use cases

  • Showing a profile view of a user
  • Showing detailed information about a transaction (such as a sync or run)
  • Showing configuration settings that don‘t need to be accessible by a URL

When not to use a side sheet

Side Sheets are a great way to cheat creating a new page. As a general rule of thumb, a SideSheet should not be used as a replacement of a new page when the page needs to be accessible by a URL. Avoid showing a SideSheet based on a URL.

Implementation details

The SideSheet component does not have any opinion about the contents of the SideSheet. In the examples below are some recipes to make sure usage of the SideSheet is consistent. It is recommended to compose more opinionated Side Sheets in the consuming application.

Side sheets close on

  • Backdrop click
  • Close icon button click
  • Escape key
  • The close function being called

Focus management

When opening the SideSheet, focus will be brought inside the SideSheet by looking for elements with [autofocus] first, [tabindex] second and button last.

When closing the SideSheet, focus will be brought back to the element that was focused before opening the SideSheet. This is normally the button that triggered the SideSheet.

Basic example

Change position

The SideSheet component can appearn on all side of the screens.

  • Position.TOP
  • Position.RIGHT
  • Position.BOTTOM
  • Position.LEFT

Full featured example with a header with a title, subtitle and a tab bar. Content is a simple card.

Title only

Example with a header with a title. Content is a simple card.

Preserve scroll position and prevent body scrolling

Use the preventBodyScrolling prop to disable scrolling outside the side sheet.