Accordion

Vertically stacked, collapsible sections. Each AccordionItem is keyed by eventKey; the parent Accordion tracks which key is open — controlled or uncontrolled.

Import

tsx

import { Accordion, AccordionItem } from '@metatoy/bootstrap-styled';

Basic

Give each AccordionItem a unique eventKey and a header. By default only one item is open at a time — opening another closes the current one. Use defaultActiveKey for an uncontrolled starting state.

Always open

Add alwaysOpen to let multiple items stay expanded at once. Pass an array to defaultActiveKey (or activeKey) to open several items on first render.

Controlled

Supply activeKey (a key or array of keys) plus onSelect to drive the open state from your own store. Omit both for the uncontrolled behavior shown above.

tsx

const [key, setKey] = useState('0');

<Accordion activeKey={key} onSelect={(k) => setKey(k)}>
<AccordionItem eventKey="0" header="One">…</AccordionItem>
<AccordionItem eventKey="1" header="Two">…</AccordionItem>
</Accordion>

Props

Prop	Type	Default	Description
activeKey	string \| string[]	—	Controlled open key(s).
defaultActiveKey	string \| string[]	—	—
alwaysOpen	boolean	—	Allow multiple items open at once.
onSelect	(key: string \| string[]) => void	—	—
children●	React.ReactNode	—	—

Each child is an AccordionItem with these props:

Prop	Type	Default	Description
eventKey●	string	—	—
header●	React.ReactNode	—	—
children	React.ReactNode	—	—

Theming

The open item reads --bs-accordion-active-bg (defaulting to --bs-primary-bg-subtle) and --bs-accordion-active-color (defaulting to --bs-primary-text-emphasis) for its highlighted header. The item chrome tracks --bs-body-bg, --bs-body-color, --bs-border-color, and --bs-border-radius, and the chevron icon flips its stroke color under [data-bs-theme=dark]. Override --bs-primary-bg-subtle / --bs-primary-text-emphasis (or the accordion tokens directly) to reshade the active state.

Accessibility

Each header renders as a native <button type="button"> with aria-expanded reflecting its open state; the collapsible body is a role="region". Headers are focusable and toggle on Enter / Space out of the box.

Explore in Ladle

The library doesn’t ship a dedicated Accordion story yet — browse the component gallery: Open in Ladle.