Version: latest

Works everywhere

Accordion works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/accordion) — the library detects the runtime automatically.

Accordion

The Accordion component renders a list of collapsible panels. Each panel can be independently toggled or controlled. Supports animated expansion and full ARIA disclosure pattern.

Live demo →

Overview

import { Accordion } from "@prokodo/ui/accordion"
;<Accordion
  items={[
    { title: "Panel 1", content: <p>Content A</p> },
    { title: "Panel 2", content: <p>Content B</p> },
  ]}
/>

Live PreviewOpen in Storybook ↗

Import

import { Accordion } from "@prokodo/ui/accordion"

CSS:

import "@prokodo/ui/accordion.css"

Props

Prop	Type	Default	Required	Description
`id`	`string`	—	—	Optional id for the root element.
`items`	`AccordionItem[]`	—	✅	Array of accordion items.
`multiExpand`	`boolean`	`false`	—	Allow multiple items open simultaneously.
`hideHeaderOnExpand`	`boolean`	`false`	—	Hide the header when an item is expanded.
`headerWrapperClassName`	`string`	—	—	CSS class on the header wrapper.
`headerToggleClassName`	`string`	—	—	CSS class on the header toggle button.
`className`	`string`	—	—	CSS class on root element.
`onChange`	`(id: string, open: boolean) => void`	—	—	Called when an item is toggled.

See src/components/accordion/Accordion.model.ts for the full AccordionProps type.

Design Tokens

Customise Accordion via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
`--pk-accordion-radius`	`var(--pk-radius-md)`	Accordion item corner radius
`--pk-accordion-border`	`var(--pk-color-border)`	Item border colour
`--pk-accordion-border-focus`	`var(--pk-color-brand)`	Focused item border colour
`--pk-accordion-shadow`	`var(--pk-shadow-sm)`	Item box-shadow
`--pk-accordion-header-bg`	`var(--pk-color-surface)`	Header background
`--pk-accordion-content-bg`	`var(--pk-color-surface)`	Content panel background
`--pk-accordion-fg`	`var(--pk-color-fg)`	Text colour
`--pk-accordion-padding-x`	`var(--pk-space-lg)`	Horizontal padding
`--pk-accordion-padding-y`	`var(--pk-space-md)`	Vertical padding
`--pk-accordion-gradient-from`	`var(--pk-color-brand)`	Hover gradient start
`--pk-accordion-gradient-to`	`var(--pk-color-accent)`	Hover gradient end
`--pk-accordion-item-tint`	`var(--pk-color-brand)`	Active item accent tint

AIC Note

Use the standard import path in application code:

import { Accordion } from "@prokodo/ui/accordion"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.3	Focus Order (A)	🔍 Manual review	The keyboard focus sequence must preserve meaning and operability in the complete page integration context.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.4.11	Focus Not Obscured (Min.) (AA)	🔍 Manual review	The focused component must not be fully hidden by sticky headers, overlays, or other positioned page elements.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 3 jest-axe assertion(s) across 5 test file(s) · 4 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Accordion in Storybook

Source

src/components/accordion/Accordion.model.ts