Accordion

Rich disclosure for FAQs, settings, member directories, nested help, and guided setup.

Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.

Installation

pnpm add github:ahmadassaf/design-system

import { Accordion } from '@gaudi/design-system/core/Accordion';

Usage

import { AccordionGroup } from '@gaudi/design-system';
<AccordionGroup  items={[    { value: 'usage', title: 'When should I use it?', content: 'Use accordions for compact progressive disclosure.' },  ]}/>

Examples

Disabled and highlighted

Guided setup

Icons and badges

Inside a card

Member directory

Nested sections

Variants and indicators

Collapsible: Advanced form fields

Collapsible: Card that opens from its footer

Collapsible: Tree view with file actions

Collapsible: Framed sections

Collapsible: Show more details

API

Accessibility

Radix-backed native buttons expose expanded state and labelled panels. Arrow Up/Down and Home/End navigate enabled headers within the current accordion; Enter/Space toggle. Disabled items are skipped. Headings default to h3 and can follow the document hierarchy. Closed panels are inert during animation and unmounted afterward; forceMount retains hidden, inert content. Reduced motion is respected.

Notes

• Accordion and AccordionGroup from the package root are the items-based convenience API. Use AccordionRoot for compound composition. The named Accordion from the core/Accordion subpath remains the compound root for compatibility.
• Give every item a stable, unique, non-empty string value. Single mode uses a string; multiple mode uses an array. An explicit undefined controlled value collapses every panel.
• The group opens the first enabled item by default. Use defaultValue={null} for a collapsed single group or defaultValue={[]} in multiple mode. AccordionRoot starts closed unless a default is supplied.
• Existing render-function children and explicit isOpen / onClick composition remain supported. New compound usage manages state and ARIA associations automatically.
• Leading content and badges must be noninteractive. Put links, inputs, and action buttons inside AccordionContent. Provide an appropriate headingLevel for nested sections.
• forceMount preserves form state but does not omit closed inputs from native form submission. Consumers own persistence, validation, and submission scope.

Related