Accordion

A native details and summary disclosure. The summary is a row one square high: its words at the start on the sixteen, the library’s chevron-down (16px, in the title grey) at its end, turned over while open. The pointer fills the row 4px past its words and chevron, keyboard focus rings it, and the details start on the square below, a line to a square.

Measure	Size
The summary	One square high, the words 4px from the fill’s edge, standing where the details’ words start.
The chevron	chevron-down, 16px, on the sixteen at the end; it turns over in transform alone (none with reduced motion).
The details	From the square below the summary, every line one square; wrapping text is a paragraph, never a row one square high.
The width	Twelve squares (--ds-accordion-width).

The React Accordion draws the same chevron on its trigger.

Design examples

Planning a visit

Example Code

Related questions remain compact until opened.

Metadata beneath a title

Example Code

A heading and duration remain visible while longer notes are tucked away.

Try it

Open the details

Example Code

Click the summary or focus it and press Enter.

Attributes and slots

Attribute	Type	Default	What it does
summary	string	Empty	The summary text or translation key.
details	string	Empty	Detail text when no named-slot content is supplied.
literal	boolean	false	The summary and details are what someone wrote, such as a template’s name: shown as they stand and never translated.
open	boolean	false	Initially expands the disclosure.

Without literal, summary and details are translation keys, as in Text:

<ds-accordion literal summary="Ideas for spring" details="Plant the bulbs in October"></ds-accordion>

For rich detail content, use slot="details" as in the example. The summary can be activated with the pointer, Enter or Space. Native <details> owns opening and closing.

Row · Text

Controlled sections in React

The source-owned react/accordion binding accepts summary, open, onOpenChange and optional actions. Actions sit beside the disclosure trigger, outside its button, and wrap below it on narrow surfaces. They remain available while details are collapsed. Use shared Button controls for those actions. The product decides whether to accept an open request; DS1 owns visibility, the disclosure icon, accessible relationships and focus return on collapse.