Accordion

Vertically stacked collapsible sections that let users show and hide content panels.

Yes. It adheres to WAI-ARIA design patterns.

Yes you can.

1
---
2
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bejamas/ui/components/accordion';
3
---
4

5
<Accordion class="w-full max-w-[420px] self-start mt-10" collapsible>
6
  <AccordionItem value="accordion-item-1">
7
    <AccordionTrigger>
8
      Is it accessible?
9
    </AccordionTrigger>
10
    <AccordionContent>
11
      Yes. It adheres to WAI-ARIA design patterns.
12
    </AccordionContent>
13
  </AccordionItem>
14
  <AccordionItem value="accordion-item-2">
15
    <AccordionTrigger>
16
      Can I customize the icon?
17
    </AccordionTrigger>
18
    <AccordionContent>
19
      Yes you can.
20
    </AccordionContent>
21
  </AccordionItem>
22
</Accordion>

Installation

bunx bejamas add accordion

npx bejamas add accordion

pnpm dlx bejamas add accordion

yarn dlx bejamas add accordion

Usage

1
---
2
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';
3
---
4

5
<Accordion class="w-full max-w-[420px] self-start">
6
  <AccordionItem open>
7
    <AccordionTrigger>
8
      Is it accessible?
9
    </AccordionTrigger>
10
    <AccordionContent>
11
      Yes. It adheres to WAI-ARIA design patterns.
12
    </AccordionContent>
13
  </AccordionItem>
14
</Accordion>

Props

Prop	Type	Default
`class`	`string`	`""`
`multiple`	`boolean`	`false`
`defaultValue`	`string`	`""`
`collapsible`	`boolean`	`false`

Examples

Multiple choice accordion

Yes. It adheres to WAI-ARIA design patterns.

Yes you can.

1
---
2
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bejamas/ui/components/accordion';
3
---
4

5
<Accordion class="w-full max-w-[420px] self-start" multiple>
6
  <AccordionItem value="accordion-item-1">
7
    <AccordionTrigger>
8
      Is it accessible?
9
    </AccordionTrigger>
10
    <AccordionContent>
11
      Yes. It adheres to WAI-ARIA design patterns.
12
    </AccordionContent>
13
  </AccordionItem>
14
  <AccordionItem value="accordion-item-2">
15
    <AccordionTrigger>
16
      Can I customize the icon?
17
    </AccordionTrigger>
18
    <AccordionContent>
19
      Yes you can.
20
    </AccordionContent>
21
  </AccordionItem>
22
  <AccordionItem value="accordion-item-3">
23
    <AccordionTrigger>
24
      Can I customize the icon?
25
    </AccordionTrigger>
26
    <AccordionContent>
27
      Yes you can.
28
    </AccordionContent>
29
  </AccordionItem>
30
</Accordion>

API Reference

Events

The accordion emits custom events that you can listen to:

Event	Detail	Description
`accordion:change`	`{ value: string[] }`	Fired when expanded items change

Content 1

1
<Accordion id="my-accordion" collapsible>
2
  <AccordionItem value="item-1">
3
    <AccordionTrigger>Item 1</AccordionTrigger>
4
    <AccordionContent>Content 1</AccordionContent>
5
  </AccordionItem>
6
</Accordion>

  const accordion = document.getElementById('my-accordion');

  accordion.addEventListener('accordion:change', (e) => {
    console.log('Expanded items:', e.detail.value);
  });

Programmatic Control

You can control the accordion programmatically by dispatching an accordion:set event:

const accordion = document.getElementById('my-accordion');

// Expand a single item
accordion.dispatchEvent(new CustomEvent('accordion:set', {
  detail: { value: 'item-1' }
}));

// Expand multiple items (when multiple prop is true)
accordion.dispatchEvent(new CustomEvent('accordion:set', {
  detail: { value: ['item-1', 'item-2'] }
}));

Data Attributes

The accordion sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
`data-state`	accordion-item	Current state (`open` or `closed`)