---
title: Sheet
description: >-
  The sheet component displays essential information for buyers at the bottom of
  the screen, appearing above other elements. Use it sparingly to avoid
  distracting buyers during checkout.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/sheet
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/sheet.md
---

# Sheet

**Requires configuration of the \[Customer Privacy]\(/docs/apps/build/checkout/capabilities#collect-buyer-consent) capability to be rendered.:**

The sheet component displays essential information for buyers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting buyers during checkout.

Sheets support a heading, scrollable body content, and action slots for primary and secondary buttons. 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.

Sheet requires the Customer Privacy capability and renders only in consent-related contexts. Without that capability, the component doesn't appear. Element positions, padding, spacing, and maximum height are controlled by Shopify (see [Shopify-controlled surfaces](#shopify-controlled-surfaces) below).

### Support Targets (29)

### Supported targets

* [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target)
* [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target)
* [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets)
* [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target)
* [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets)
* [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target)
* [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target)
* [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-)
* [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets)
* [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets)
* [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target)
* [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets)
* [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target)
* [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets)
* [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target)
* [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target)
* [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target)

#### Use cases

* **Cookie consent:** Present cookie preferences with accept, reject, and learn-more actions in a non-intrusive bottom panel.
* **Privacy disclosures:** Display privacy policy summaries with acknowledgment actions before buyers complete checkout.
* **Data collection notices:** Inform buyers about what personal data you collect and how it's used.
* **Consent management:** Let buyers toggle specific consent categories like analytics, marketing, and essential cookies.

***

## Properties

Configure the following properties on the sheet component.

* **accessibilityLabel**

  **string**

  A label that describes the purpose of the sheet, announced by assistive technologies. When set, screen readers will use this label instead of the `heading` to describe the sheet.

* **defaultOpen**

  **boolean**

  **Default: false**

  Whether the sheet should be open when it first renders. Use sparingly — only when the user must interact with the sheet before proceeding (for example, a privacy consent prompt). Only takes effect on the initial render.

* **heading**

  **string**

  A title that describes the content of the sheet.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

### Events

The sheet component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the sheet is hidden, after any hide animations have completed.

* **aftershow**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the sheet is shown, after any show animations have completed.

* **hide**

  **CallbackEventListener\<typeof tagName>**

  A callback fired immediately after the sheet is hidden.

* **show**

  **CallbackEventListener\<typeof tagName>**

  A callback fired immediately after the sheet is shown.

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

### Slots

The sheet component supports slots for additional content placement within the component. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* **primary-action**

  **HTMLElement**

  The main action button displayed in the sheet footer, representing the primary action users should take. Only accepts a single button component.

* **secondary-actions**

  **HTMLElement**

  Additional action buttons displayed in the sheet footer, providing alternative or supporting actions.

### Methods

The sheet component exposes methods for programmatic control. Learn more about [using methods](https://shopify.dev/docs/api/polaris/using-polaris-web-components#methods).

* **hideOverlay**

  **() => void**

  **required**

  A method to programmatically hide the overlay and run any associated hide animations.

***

## Examples

### Show a consent notice

Display a consent notice at the bottom of the checkout page. This example shows a sheet with a heading, an `accessibilityLabel`, and body text.

## Show a consent notice

![A rendered example of the sheet component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-default-CXkL_g1Z.png)

## html

```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>
```

### Manage cookie preferences

Let buyers manage cookie preferences with clear choices. This example places a save button in the `primary-action` slot and reject and learn-more buttons in `secondary-actions`, with an `accessibilityLabel` for screen readers.

## html

```html
<!-- This component requires access to Customer Privacy API to be rendered. -->
<s-button commandFor="consent-form">Manage preferences</s-button>


<s-sheet
  id="consent-form"
  heading="Cookie preferences"
  accessibilityLabel="Manage cookie consent preferences"
>
  <s-stack>
    <s-paragraph>
      We use cookies to personalize your experience and analyze site traffic.
      You can change your preferences at any time.
    </s-paragraph>
    <s-checkbox defaultChecked label="Essential cookies (required)"></s-checkbox>
    <s-checkbox label="Analytics cookies"></s-checkbox>
    <s-checkbox label="Marketing cookies"></s-checkbox>
  </s-stack>


  <s-button variant="primary" slot="primary-action">Save preferences</s-button>
  <s-button variant="secondary" slot="secondary-actions">Reject all</s-button>
  <s-button variant="secondary" slot="secondary-actions">Learn more</s-button>
</s-sheet>
```

### Display a privacy policy summary

Show a privacy policy summary that buyers can review and confirm. This example includes body text and a confirm button that closes the sheet after the buyer reads the policy.

## html

```html
<!-- This component requires access to Customer Privacy API to be rendered. -->
<s-button commandFor="privacy-sheet">Privacy policy</s-button>


<s-sheet
  id="privacy-sheet"
  heading="Privacy policy"
  accessibilityLabel="Read our privacy policy"
>
  <s-stack>
    <s-paragraph>
      We collect personal information to process your order and improve your
      shopping experience. Your data is stored securely and never shared with
      third parties without your consent.
    </s-paragraph>
    <s-paragraph>
      You can request deletion of your data at any time by contacting our
      support team. For details, visit our full privacy policy.
    </s-paragraph>
  </s-stack>


  <s-button variant="primary" slot="primary-action">I understand</s-button>
  <s-button variant="secondary" slot="secondary-actions">
    View full policy
  </s-button>
</s-sheet>
```

***

## Best practices

* **Use sparingly:** Reserve sheets for consent and privacy scenarios. Overusing them distracts buyers during checkout.
* **Reserve for content that requires acknowledgment:** Sheets work best when buyers need to actively respond before continuing, not for passive informational content.
* **Limit to one sheet at a time:** Don't stack multiple sheets. If the workflow requires more than one decision, combine them or use a [modal](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/modal) for the additional step.
* **Keep content concise:** Use short content, small text sizes, or remove the header to avoid scrolling. When content exceeds the maximum height, the heading and content become scrollable while the actions slot and dismiss button remain fixed.
* **Include clear actions:** Use the `primary-action` slot for the main decision and `secondary-actions` for alternatives like "Reject all" or "Learn more." The `primary-action` slot supports up to two buttons, and the `secondary-actions` slot supports one button. Keep button labels brief so they don't wrap to more than one line.
* **Provide an accessibility label:** Use `accessibilityLabel` when the sheet heading alone doesn't fully describe the purpose for buyers using assistive technology.
* **Handle all consent outcomes:** Account for consent, denial, and dismissal. When a buyer accepts, cookies load and the sheet doesn't re-appear. When a buyer rejects, cookies don't load and the sheet doesn't re-appear. When a buyer dismisses without a decision, cookies don't load and the sheet re-appears on the next visit.

***

## Shopify-controlled surfaces

To prevent disruptions during checkout, we maintain strict design control over key areas of the sheet component. These Shopify-controlled elements include:

### Locations of elements

The sheet elements (header, content, action buttons, and dismiss button) are strategically positioned and sized to present vital information upfront.

![Locations of header and content](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces1-BYdmFnFL.png)

![Locations of dismiss button and actions](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces2-DmuZ7ieq.png)



### Padding and spacing

![Padding and spacing](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces3-D96rafoq.png)



### Maximum height

To balance buyer attention and task completion, a maximum height is set for the sheet component.

![Small screen maximum height](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces4-C5zXwVbq.png)

![Large screen maximum height](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces5-DDXfY14p.png)

When content pushes the sheet to exceed this limit, the following UI behaviors are triggered:



### Heading and content are scrollable

![Heading and content are scrollable](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces6-Byio-wdf.png)



### Expand pill appears to allow buyers to view the entire content

![Expand pill to allow maximum height](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces7-elyn6rze.png)



### Actions slot and dismiss button remain fixed

![Actions slot and dismiss button remain fixed](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces8-CEAkI_vh.png)

***

## Privacy consent requirements

### Content

For the best buyer experience, ensure content is brief and to the point.

![Shows content that is brief and to the point](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations1-Cm0WWZSs.png)

Various strategies can be employed to avoid content scrolling.



#### Use short content

![Use short content](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations2-DXge6dCJ.png)



#### Use small text size

![Use small text size](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations3-CMmrlA2q.png)



#### Remove the header

![Remove the header](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations4-Bgl9D6nC.png)



### Actions slot

The actions slot allows buyers to make decisions and is split into primary and secondary sections.

![Actions slot](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations5-_xPV9vWf.png)



### Primary section

Contains primary actions for buyer decisions on the sheet's prompt. Up to two buttons are allowed. Keep the button's content brief so that it doesn't wrap to more than one line.

![Primary section](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations6-kQkREktX.png)



### Secondary section

Contains action that is unrelated to the sheet's prompt. Only one button is allowed. A [modal](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/modal) can be activated when engaging with the secondary action. Keep the button's content brief so that it doesn't wrap to more than one line.

![Secondary section](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations7-BZ3drWDW.png)



### Consent, denial of consent, and sheet dismissal

#### Consent

When a buyer expresses consent by pressing the acceptance button, cookies load and the sheet doesn't re-appear on refresh.



#### Denial of consent

When a buyer expresses denial of consent by pressing the rejection button, cookies don't load and the sheet doesn't re-appear on refresh.



#### Sheet dismissal

When a buyer neither grants nor denies consent by pressing the dismiss button, cookies don't load and the sheet re-appears on refresh.

![Sheet dismissal](https://shopify.dev/assets/assets/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations8-C1RfXVWf.png)

***