Accordion

Expandable/collapsible content sections using native details/summary elements. Keyboard accessible by default.

What is UI Foundations?

A token-first, Figma-aligned design system for building consistent UIs across brands and modes.

How do I install it?

Install via npm: npm install ui-foundations

Can I customize the tokens?

Yes — override semantic tokens or add brand semantic token files.

Open Accordion Playground

Anatomy

1 2
Accordion item

Content area

  1. 1 Summary — clickable trigger with chevron indicator
  2. 2 Content — expandable body area

Options

Table of options

PropertyValuesDefault
titletext—
opentrue / falsefalse
disabledtrue / falsefalse

Keyboard interactions

KeyAction
TabMoves focus between summary elements
Enter / SpaceToggles the focused item open/closed

Accessibility

  • Uses native <details> and <summary> elements — keyboard and screen reader support is built-in.
  • The browser manages aria-expanded state automatically.
  • Disabled items use pointer-events: none and muted color to indicate non-interactivity.

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Keyboard interactionsNative details/summary behavior.
✓
Design tokensComponent-scoped tokens (--uif-accordion-*).

The accordion fills the available inline space and keeps that width when items open or close. Hover uses a subtle tint mixed from the current Semantic Brand foreground and surface; no Brand-specific colors are hardcoded.