---
title: Details
description: >-
  Creates a collapsible content area that can be expanded or collapsed by users.
  Use with Summary to provide expandable sections for additional information or
  settings.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/details
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/details.md
---

# Details

The details component creates a collapsible content area that buyers can expand or collapse to reveal optional detail.

Use `s-details` with `s-summary` for expandable sections that keep secondary information or settings out of the main flow until needed.

Nested `s-details` elements aren't officially supported and might cause inconsistent expand or collapse behavior across browsers.

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

* **Pickup instructions**: Hide store-specific pickup details behind a toggle to keep the checkout layout clean.
* **Return policies**: Let buyers expand a collapsible summary to read full return and refund terms.
* **Shipping options**: Present delivery method breakdowns inside a disclosure so buyers expand them on demand.
* **Order notes**: Provide an expandable section for gift messages or special instructions without cluttering the page.

***

## Properties

Configure the following properties on the details component.

* **defaultOpen**

  **boolean**

  **Default: false**

  Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render.

* **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.

* **open**

  **boolean**

  **Default: false**

  Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself.

* **toggleTransition**

  **'none' | 'auto'**

  **Default: 'auto'**

  Sets the animation transition between the open and closed states.

  * `none`: Disables all transition animations.
  * `auto`: Uses the default transition animation.

### Events

The details 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).

* **aftertoggle**

  **CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>**

  A callback fired when the element state changes, after any toggle animations have finished.

  * If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.

  Learn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).

* **toggle**

  **CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>**

  A callback fired immediately when the element state changes, before any animations.

  * If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.

  Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.

### 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];
}
```

### ToggleArgumentsEvent

The event data provided to toggle-related callbacks. Contains the previous and next visibility states of the element.

* newState

  The visibility state of the element after the toggle occurred.

  ```ts
  ToggleState
  ```

* oldState

  The visibility state of the element before the toggle occurred.

  ```ts
  ToggleState
  ```

### ToggleState

The visibility state of a toggleable element. - \`open\`: The element is visible and showing its content. - \`closed\`: The element is hidden and its content is not visible.

```ts
'open' | 'closed'
```

***

## Summary

Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.

* **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.

***

## Examples

### Create a collapsible section

Hide supplementary content until the buyer chooses to expand it. This example wraps pickup instructions in `s-details` with an `s-summary` label.

## Create a collapsible section

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

## html

```html
<s-details>
  <s-summary>Pickup instructions</s-summary>
  <s-text>
    Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs.
  </s-text>
</s-details>
```

### Nest lines inside one disclosure

Group several related lines under a single expandable label. This example wraps standard, express, and overnight rates in one `s-details` with stacked text inside.

## html

```html
<s-details>
  <s-summary>Shipping options</s-summary>
  <s-stack gap="small">
    <s-text>Standard: 5-7 business days - Free</s-text>
    <s-text>Express: 2-3 business days - $9.99</s-text>
    <s-text>Overnight: Next business day - $24.99</s-text>
  </s-stack>
</s-details>
```

***

## Best practices

* **Write a clear summary label**: Make the `s-summary` text descriptive enough that buyers know what they'll find when they expand the section.
* **Default to collapsed**: Keep `s-details` closed unless the content is critical to the checkout flow, so the page stays uncluttered.
* **Don't nest disclosures**: Avoid placing disclosures inside other disclosures, as this can cause inconsistent behavior.
* **Use for supplementary content**: Reserve collapsible sections for information buyers might want but don't need to see upfront.

***