--- 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/2026-04/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: 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/api/checkout-ui-extensions/2026-04/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/2026-04/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 (29) ### Supported targets * purchase.​checkout.​actions.​render-before * purchase.​checkout.​block.​render * purchase.​checkout.​cart-line-item.​render-after * purchase.​checkout.​cart-line-list.​render-after * purchase.​checkout.​contact.​render-after * purchase.​checkout.​delivery-address.​render-after * purchase.​checkout.​delivery-address.​render-before * purchase.​checkout.​footer.​render-after * purchase.​checkout.​header.​render-after * purchase.​checkout.​payment-method-list.​render-after * purchase.​checkout.​payment-method-list.​render-before * purchase.​checkout.​pickup-location-list.​render-after * purchase.​checkout.​pickup-location-list.​render-before * purchase.​checkout.​pickup-location-option-item.​render-after * purchase.​checkout.​pickup-point-list.​render-after * purchase.​checkout.​pickup-point-list.​render-before * purchase.​checkout.​reductions.​render-after * purchase.​checkout.​reductions.​render-before * purchase.​checkout.​shipping-option-item.​details.​render * purchase.​checkout.​shipping-option-item.​render-after * purchase.​checkout.​shipping-option-list.​render-after * purchase.​checkout.​shipping-option-list.​render-before * purchase.​thank-you.​announcement.​render * purchase.​thank-you.​block.​render * purchase.​thank-you.​cart-line-item.​render-after * purchase.​thank-you.​cart-line-list.​render-after * purchase.​thank-you.​customer-information.​render-after * purchase.​thank-you.​footer.​render-after * purchase.​thank-you.​header.​render-after ## Properties * **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 Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/using-polaris-components#event-handling). * **afterhide** **CallbackEventListener\** A callback fired when the sheet is hidden, after any hide animations have completed. * **aftershow** **CallbackEventListener\** A callback fired when the sheet is shown, after any show animations have completed. * **hide** **CallbackEventListener\** A callback fired immediately after the sheet is hidden. * **show** **CallbackEventListener\** 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 & 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 Learn more about [component slots](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/using-polaris-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 Learn more about [component methods](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/using-polaris-components#methods). * **hideOverlay** **() => void** **required** A method to programmatically hide the overlay and run any associated hide animations. Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-default-CXkL_g1Z.png) ### Examples * #### Code ##### Default ```html Open Sheet Sheet Content ``` ## 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/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces1.png) ![Locations of dismiss button and actions](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces2.png) ### Padding and spacing ![Padding and spacing](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces3.png) ### Maximum height To balance customer attention and task completion, a maximum height is set for the Sheet component. ![Small screen maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces4.png) ![Large screen maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces5.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/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces6.png) ### Expand pill appears to allow customers to view the entire content ![Expand pill to allow maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces7.png) ### Actions slot and dismiss button remain fixed ![Actions slot and dismiss button remain fixed](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces8.png) ## Privacy consent requirements ### Content For the best customer experience, ensure content is brief and to the point. ![Shows content that is brief and to the point](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations1.png) Various strategies can be employed to avoid content scrolling. #### Use short content ![Use short content](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations2.png) #### Use small text size ![Use small text size](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations3.png) #### Remove the header ![Remove the header](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations4.png) ### Actions slot The actions slots allows customers to make decisions and is split into primary and secondary sections. ![Actions slot](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations5.png) ### Primary section Contains primary actions for customer 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/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations6.png) ### Secondary section Contains action that is unrelated to the sheet's prompt. Only one button is allowed. A 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/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations7.png) ### Consent, denial of consent, and sheet dismissal #### Consent When a customer expresses consent by pressing the acceptance button, cookies will load and the sheet should not re-appear on refresh. #### Denial of consent When a customer expresses denial of consent by pressing the rejection button, cookies will not load and the sheet will not re-appear on refresh. #### Sheet dismissal When a customer neither grants nor denies consent by pressing the dismiss button, cookies will not load and the sheet will re-appear on refresh. ![Sheet dismissal](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations8.png)