Accordion

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { Accordion } from 'tenet-ui';

Source: src/components/Accordion/Accordion.tsx

Usage guidelines

When to use: progressively disclosing stacked sections of content (FAQs, settings groups) so the page stays scannable. For switching between peer views use Tabs; for a single show/hide, a lone disclosure button is enough.

Rules

• Compose Accordion.Items, each with a unique value and a title. Each item is a real <button aria-expanded> controlling a labelled region — keyboard and screen-reader support come for free (Enter/Space toggle; Up/Down/Home/End move between headers).
• Use type="single" (default) when only one section should be open; type="multiple" when several can. Control with value + onValueChange, or uncontrolled with defaultValue.
• Put the most important section first; don’t bury critical content behind a collapsed header by default.
• Don’t nest accordions deeply — one level keeps it comprehensible.

Do / Don’t

• ✅ <Accordion type="single" defaultValue={['faq-1']}><Accordion.Item value="faq-1" title="…">…</Accordion.Item></Accordion>
• ❌ A <div onClick> that toggles display with no aria-expanded/region.
• ❌ Hiding must-see content (errors, primary actions) inside a collapsed item.

Examples

2 stories for Accordion — open in Storybook

• Single components-accordion--single
• Multiple components-accordion--multiple

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Accordion

Prop	Type	Default	Description
type	'single' | 'multiple' AccordionType	single	single allows one open item (collapsible); multiple allows many.
value	string[]	—	Controlled set of open item values.
defaultValue	string[]	[]	Uncontrolled initial open item values.
onValueChange	(value: string[]) => void	—	Called with the new set of open values.
children	ReactNode	—
className	string	—

Accordion.Item

Prop	Type	Default	Description
value *	string	—	Unique value identifying this item.
title *	ReactNode	—	Header text shown on the trigger button.
disabled	boolean	false	Disable this item.
children	ReactNode	—
className	string	—

* required

Related components

• Tabs
• Card
• Stack
• Heading