Accordion

Container for grouped expandable sections. Use with disclosure components.

Default

Section 1 ▾

Content for section 1

Section 2 ▾

Content for section 2

Section 3 ▾

Content for section 3

Base

Class	Description
`.ui-accordion`	Base class

Separated

Class	Description
`.ui-accordion--separated`	separated

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-accordion-border-color`	`var(--ui-color-border)`	Border color
`--ui-accordion-border-width`	`var(--ui-border-width-sm)`	Border thickness
`--ui-accordion-radius`	`var(--ui-radius-md)`	Corner radius

Separated

Section 1 ▾

Content for section 1

Section 2 ▾

Content for section 2

<!-- Gap between accordion items -->
<div class="ui-accordion ui-accordion--separated">
  <details class="ui-disclosure">
    <summary class="ui-disclosure__trigger">
Section 1
      <span class="ui-disclosure__icon">▾</span>
    </summary>
    <div class="ui-disclosure__content">
      <p>Content for section 1</p>
    </div>
  </details>
  <details class="ui-disclosure">
    <summary class="ui-disclosure__trigger">
Section 2
      <span class="ui-disclosure__icon">▾</span>
    </summary>
    <div class="ui-disclosure__content">
      <p>Content for section 2</p>
    </div>
  </details>
</div>

With One Open

Open Section ▾

This section starts open

Closed Section ▾

Click to open

<div class="ui-accordion">
  <details class="ui-disclosure" open>
    <summary class="ui-disclosure__trigger">
Open Section
      <span class="ui-disclosure__icon">▾</span>
    </summary>
    <div class="ui-disclosure__content">
      <p>This section starts open</p>
    </div>
  </details>
  <details class="ui-disclosure">
    <summary class="ui-disclosure__trigger">
Closed Section
      <span class="ui-disclosure__icon">▾</span>
    </summary>
    <div class="ui-disclosure__content">
      <p>Click to open</p>
    </div>
  </details>
</div>