> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Accordion
> A vertically stacked set of expandable sections that reveal content on click — supports single and multiple expansion modes.
## Overview
What is A'raf DS?
A'raf DS is a design system built for modern web applications, providing consistent tokens, components, and patterns.
How do I install it?
Is dark mode supported?
**Accordion** organizes content into collapsible sections, reducing cognitive load by hiding detail until needed. It supports single (only one open at a time) and multiple (many can be open) expansion modes.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@araf-ds/core"
export default function Example() {
return (
What is A'raf DS?
A'raf DS is a design system built for modern web applications.
How do I install it?
Install via npm: npm install @araf-ds/core
)
}
```
***
## Variants
### Single Mode (Default)
Only one item can be open at a time. Use `collapsible` to allow closing the active item.
What is A'raf DS?
A'raf DS is a design system built for modern web applications.
How do I install it?
Is dark mode supported?
```tsx theme={null}
What is A'raf DS?A'raf DS is a design system built for modern web applications.How do I install it?Install via npm: npm install @araf-ds/coreIs dark mode supported?Yes, all components adapt automatically via semantic tokens.
```
### Multiple Mode
Multiple items can be open simultaneously.
```tsx theme={null}
Section 1Content 1Section 2Content 2
```
***
## API Reference
### Accordion
Expansion mode. Values: `single` · `multiple`
Controlled open item(s). String for `single`, string array for `multiple`.
Callback fired when the open state changes.
Uncontrolled default open item(s).
When `true`, allows closing the active item in `single` mode by clicking it again.
Additional Tailwind classes for custom overrides.
### AccordionItem
Unique identifier for this item (required).
Disables this item — it cannot be opened or closed.
***
## Accessibility
* Accordion follows the WAI-ARIA Accordion pattern with `role="button"` on triggers
* Triggers toggle `aria-expanded` between `true` and `false`
* Content panels use `role="region"` and `aria-labelledby` pointing to their trigger
* Enter/Space opens or closes the focused item
* Up/Down arrow keys move focus between triggers
***
## Do's & Don'ts
* Use Accordion for FAQ sections, settings groups, and structured reference content
* Use `type="single"` for step-by-step guides where one step is active
* Use `type="multiple"` for reference content users may want to compare
* Keep trigger labels short — one clear phrase per item
* Don't use Accordion to hide critical information users always need
* Don't nest accordions inside accordion content — it creates confusion
* Don't use Accordion as a replacement for Tabs
* Don't put primary CTAs inside accordion panels — they are easily missed