Choose a version:

Details

The details component creates a collapsible content area that customers can expand or collapse to reveal additional information. Use details to keep secondary content like policies, instructions, or settings out of the main flow until needed.

Details works with the summary component to provide an accessible disclosure control. For static content that's always visible, use text or paragraph instead.

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

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the details component.

Anchor to defaultOpen 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.
Anchor to id 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.
Anchor to open 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.
Anchor to toggleTransition 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.

Anchor to EventsEvents

The details component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to aftertoggle aftertoggle <typeof tagName, >: 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 and oldState property.
Anchor to toggle toggle <typeof tagName, >: 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, and the newState and 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.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): 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.

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.
```
ToggleState
```
oldState
The visibility state of the element before the toggle occurred.
```
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.

'open' | 'closed'

Anchor to SummarySummary

Represents the visible heading of a details disclosure. Use only as a child of s-details components.

Anchor to id 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.

Anchor to ExamplesExamples

Anchor to Create a collapsible sectionCreate a collapsible section

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

Create a collapsible section

An expandable disclosure element with a summary label that reveals hidden content when toggled.

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>

Anchor to Nest lines inside one disclosureNest 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

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

Anchor to Best practicesBest practices

Write a clear summary label: Make the s-summary text descriptive enough that customers know what they'll find when they expand the section.
Default to collapsed: Keep s-details closed unless the content is critical to the customer account, 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 customers may want but don't need to see upfront.

Was this page helpful?