Disclosure

Expandable/collapsible content section. Uses native details/summary for accessibility without JS.

Default

Click to expand ▾

Hidden content that expands when clicked.

Base

Class	Description
`.ui-disclosure`	Base class

Borderless

Class	Description
`.ui-disclosure--borderless`	borderless

Animate

Class	Description
`.ui-disclosure--animate`	animate

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-disclosure-border-color`	`var(--ui-color-border)`	Border color
`--ui-disclosure-border-width`	`var(--ui-border-width-sm)`	Border thickness
`--ui-disclosure-radius`	`var(--ui-radius-md)`	Corner radius
`--ui-disclosure-trigger-height`	`var(--ui-row-3)`	Trigger overall height
`--ui-disclosure-padding-x`	`calc(var(--ui-unit) * 2)`	Horizontal padding
`--ui-disclosure-padding-y`	`calc(var(--ui-unit) * 2)`	Vertical padding

Open By Default

Already expanded ▾

This content is visible by default.

<details class="ui-disclosure" open>
  <summary class="ui-disclosure__trigger">
Already expanded
    <span class="ui-disclosure__icon">▾</span>
  </summary>
  <div class="ui-disclosure__content">
    <p>This content is visible by default.</p>
  </div>
</details>

Borderless

Borderless disclosure ▾

No border around the disclosure.

<details class="ui-disclosure ui-disclosure--borderless">
  <summary class="ui-disclosure__trigger">
Borderless disclosure
    <span class="ui-disclosure__icon">▾</span>
  </summary>
  <div class="ui-disclosure__content">
    <p>No border around the disclosure.</p>
  </div>
</details>

Animated

Animated expansion ▾

Content animates in when opened.

<details class="ui-disclosure ui-disclosure--animate">
  <summary class="ui-disclosure__trigger">
Animated expansion
    <span class="ui-disclosure__icon">▾</span>
  </summary>
  <div class="ui-disclosure__content">
    <p>Content animates in when opened.</p>
  </div>
</details>