Accordion

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

Accordion.tsx

Import

import { Accordion } from 'tenet-ui';

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[]	None	Controlled set of open item values.
defaultValue	string[]	[]	Uncontrolled initial open item values.
onValueChange	(value: string[]) => void	None	Called with the new set of open values.
children	ReactNode	None
className	string	None

Accordion.Item

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

* required

Related components

• Tabs
• Card
• Stack
• Heading