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

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.

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

* **defaultOpen**

  **boolean**

  **Default: false**

  Indicates whether the element should be open by default.

  This reflects to the `open` attribute.

* **id**

  **string**

  A unique identifier for the element.

* **open**

  **boolean**

  **Default: false**

  Whether the element is open.

  This does not reflect to any attribute.

* **toggleTransition**

  **'none' | 'auto'**

  **Default: 'auto'**

  Sets the transition between the two states.

## Events

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

* **aftertoggle**

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

  Callback fired when the element state changes **after** any 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`.

* **toggle**

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

  Callback straight after the element state changes.

  * 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 `oldState` property will be set to `open` and the `newState` will be `closed`.

### CallbackEventListener

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

### CallbackEvent

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

### ToggleArgumentsEvent

* newState

  ```ts
  ToggleState
  ```

* oldState

  ```ts
  ToggleState
  ```

### ToggleState

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-default-B9CikpH3.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-details defaultOpen>
    <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>
  ```