Collapsible · Accordion

Collapsible — one row that opens to show more: a nav group’s fold, ‘advanced settings’ under a form, ‘show more’ on a card.

Beta · Navigation and overlay · packages/css/src/components/collapsible.css

.pui-collapsible (a <details>; __trigger __chevron __content) · .pui-accordion (site style; --compact) of .pui-accordion-item (__question __marker __answer).

Collapsible · Accordion — every size and every stateOpen in the workshop

Sizes across, states down.

Collapsible — Beta

• Label; Content (swap — default Slot); State: closed · open
• 320 wide in the specimen; fills its column in use; no border of its own — an Accordion item has one

Use when one section of a screen is optional to see — advanced fields, a long description, a nav group’s children.

Do not use when several sections share the rule ‘one open at a time’ (Accordion); the content is a panel from the edge (Sheet); to hide the primary content.

Relates to Accordion, Accordion item, Nav item (Has chevron), Slot, Card.

Anti-patterns a collapsible closed by default that hides required fields · a chevron that does not turn · two collapsibles for one thing · a fill changed on the instance.

Keywords: collapsible, disclosure, expand, show more, fold

Figma — page Collapsible & Accordion: Collapsible (2 variants)

shadcn: collapsible

Accordion — Beta

Accordion — a stack of questions where one opens at a time.

• Items 1–3 exposed — question, answer, style, state; Has item 3 (two or three in the specimen; the FAQ runs longer — add instances)
• 720 wide in the specimen; fills its column

Use when three or more questions or groups that share a place and are read one at a time — an FAQ, a settings page, a long form’s sections.

Do not use when the reader needs several open at once (Collapsibles); the sections are navigation (Tabs); a single fold (Collapsible).

Relates to Accordion item, Collapsible, Tabs, Card, Heading pair.

Anti-patterns every item open · an accordion inside an accordion · items of mixed style · a fill changed on the instance.

Keywords: accordion, faq, settings groups, disclosure list

Figma — page Collapsible & Accordion: Accordion (1 variants) · Accordion item (4 variants)

shadcn: accordion

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens collapsible.css.

<details class="pui-collapsible"><summary class="pui-collapsible__trigger">Advanced settings
  <span class="pui-icon pui-collapsible__chevron">…chevron-down…</span></summary>
  <div class="pui-collapsible__content">…</div></details>
<div class="pui-accordion">
  <details class="pui-accordion-item" open><summary class="pui-accordion-item__question">How does billing work?
    <span class="pui-accordion-item__marker" aria-hidden="true"></span></summary>
    <div class="pui-accordion-item__answer">…</div></details> …</div>
<div class="pui-accordion pui-accordion--compact"> …the same items with a chevron in __marker… </div>

The modifiers

	What it is	Note
Style	(none) site · --compact (on the accordion)	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Collapsible trigger	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Collapsible trigger	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Collapsible trigger	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok
Accordion question	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Accordion question	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Accordion question	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok

1 of 1 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured; 7 stop(s) the Tab key does not reach or that the specimen draws in a state that only exists while focused.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).