DATA DISPLAY

Accordion

Stacked, expandable sections. Built on Radix Accordion — full keyboard wiring, controlled and uncontrolled modes, and the ARIA disclosure pattern come from the primitive.

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'damo-ui'

Single, collapsible

A Memphis-inspired React + Next.js component library.

1<Accordion type="single" collapsible defaultValue="item-1">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>What is Damo UI?</AccordionTrigger>
4    <AccordionContent>
5      A Memphis-inspired React + Next.js component library.
6    </AccordionContent>
7  </AccordionItem>
8  <AccordionItem value="item-2">
9    <AccordionTrigger>Is it accessible?</AccordionTrigger>
10    <AccordionContent>
11      Yes — every interactive component is built on Radix primitives.
12    </AccordionContent>
13  </AccordionItem>
14</Accordion>

Multiple open at once

1<Accordion type="multiple" defaultValue={['a', 'b']}>
2  …
3</Accordion>

Props (Accordion root)

Accordion props
PropTypeDefaultDescription
type*'single' | 'multiple'—single allows one item open at a time; multiple allows several.
collapsibleboolean—Only valid for type="single". When true the active item can be closed by clicking it again.
value / defaultValuestring | string[]—Controlled / uncontrolled active value(s).
onValueChange(value: string | string[]) => void—Fires whenever the active item(s) change.
orientation'horizontal' | 'vertical''vertical'Layout direction for keyboard navigation.

Accessibility

  • Radix wraps each AccordionTrigger in an <h3> with a real <button> inside — aria-expanded tracks the open state and aria-controls wires it to the content panel.
  • Keyboard: Tab moves between triggers; Enter / Space toggle the focused panel; Home / End jump to the first / last trigger.
← AvatarTable →