Components / Accordion

Accordion

Explore every variant and expand each example’s formatted usage code.

API reference

Accordion

Expandable sections with keyboard controls and persistent draft content.

↗

Accordion sections

Project details

Each section expands independently.

Display settings

Collapsed content keeps its draft values.

How does this work?

Use Enter or Space to toggle a section. Multiple sections can stay open.

<div class="catalog-accordion">
  <CollapsibleSection
    title="Project details"
    description="Each section expands independently."
    defaultOpen
  >
    <TextInput
      aria-label="Accordion project name"
      placeholder="Project name"
    />
  </CollapsibleSection>
  <CollapsibleSection
    title="Display settings"
    description="Collapsed content keeps its draft values."
  >
    <TextInput
      aria-label="Accordion display label"
      placeholder="Display label"
    />
  </CollapsibleSection>
  <CollapsibleSection title="How does this work?">
    <p>
      Use Enter or Space to toggle a section. Multiple sections can
      stay open.
    </p>
  </CollapsibleSection>
</div>

API reference

Explore the complete contracts and inspect complex types.