---
title: Sheet
description: >-

  The Sheet component displays essential information for customers at the bottom
  of the screen, appearing above other elements. Use it sparingly to avoid
  distracting customers during checkout. This component requires access to
  [Customer Privacy
  API](/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent)
  to be rendered.


  The library automatically applies the [WAI-ARIA Dialog
  pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the
  activator and the sheet content.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/overlays/sheet
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/overlays/sheet.md
---

# Sheet

**Requires configuration of the \[Customer Privacy]\(/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability to be rendered.:**

The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be rendered.

The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Properties

* **accessibilityLabel**

  **string**

  A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context.

  This overrides the `heading` prop for screen readers.

* **defaultOpen**

  **boolean**

  **Default: false**

  Indicates whether the Sheet should be open by default. This property is necessary in some cases, but its usage is generally discouraged due to potential negative impacts on user experience.

  Developers should:

  * Only set this property to true when there are vitally important behaviors of the application that depend on the user interacting with the sheet.
  * Make every effort to conditionally hide the sheet based on the state of checkout. An explicit example is custom privacy consent, where the sheet should only be displayed when consent is necessary and has not yet been explicitly given by the user.

  This property is useful for when the Sheet needs to be rendered on the page load and not triggered by a user action. The property should only take effect when the `Sheet` is rendered for the first time. To toggle the Sheet after it has been rendered, use the `ui.showOverlay()` method instead.

* **heading**

  **string**

  A title that describes the content of the sheet.

* **id**

  **string**

  A unique identifier for the element.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.

* **aftershow**

  **CallbackEventListener\<typeof tagName>**

  Callback fired when the overlay is shown **after** any animations to show the overlay have finished.

* **hide**

  **CallbackEventListener\<typeof tagName>**

  Callback fired after the overlay is hidden.

* **show**

  **CallbackEventListener\<typeof tagName>**

  Callback fired after the overlay is shown.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Slots

Learn more about [component slots](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).

* **primary-action**

  **HTMLElement**

  The primary action to perform, provided as a button type element.

* **secondary-actions**

  **HTMLElement**

  The secondary actions to perform, provided as a button type element.

## Methods

Learn more about [component methods](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#methods).

* **hideOverlay**

  **() => void**

  **required**

  Method to hide an overlay.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2026-04/sheet-default-CXkL_g1Z.png)

### Examples

* #### Code

  ##### Default

  ```html
  <!-- This component requires access to Customer Privacy API to be rendered. -->
  <s-button commandFor="consent-sheet">Open Sheet</s-button>
  <s-sheet id="consent-sheet" heading="Sheet" accessibilityLabel="A sheet with text content">
    <s-text>Sheet Content</s-text>
  </s-sheet>
  ```