Accordion

Storybook

Go to Story

AccordionRoot()

function AccordionRoot(props): Element;

Defined in: src/components/Accordion/Accordion.tsx:47

An accordion is a vertically stacked set of interactive headings that each reveal a section of content.

For unstyled variant just for one trigger, see CollapsibleRoot|Collapsible.

Parameters

Parameter	Type
props	AccordionSingleProps | AccordionMultipleProps & RefAttributes<HTMLDivElement>

Returns

Element

Examples

// Just one item can be opened at once
<AccordionRoot type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Accessibility</AccordionTrigger>
    <AccordionContent>It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Styles</AccordionTrigger>
    <AccordionContent>It comes with default styling.</AccordionContent>
  </AccordionItem>
</Accordion>

// Multiple items can be opened simultaneously
<AccordionRoot type="multiple">
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>

---

AccordionItem()

function AccordionItem(__namedParameters): Element;

Defined in: src/components/Accordion/Accordion.tsx:63

A single item within an accordion. Must be a direct child of Accordion. Each item needs a unique value prop to identify it.

Parameters

Parameter	Type
__namedParameters	AccordionItemProps & RefAttributes<HTMLDivElement>

Returns

Element

Example

<AccordionItem value="item-1">
  <AccordionTrigger>Trigger text</AccordionTrigger>
  <AccordionContent>Content</AccordionContent>
</AccordionItem>

---

AccordionTrigger()

function AccordionTrigger(__namedParameters): Element;

Defined in: src/components/Accordion/Accordion.tsx:83

The trigger button that toggles the expanded state of an accordion item. Must be a direct child of AccordionItem.

Parameters

Parameter	Type
__namedParameters	AccordionTriggerProps & RefAttributes<HTMLButtonElement>

Returns

Element

Example

<AccordionTrigger>Section title</AccordionTrigger>

---

AccordionContent()

function AccordionContent(__namedParameters): Element;

Defined in: src/components/Accordion/Accordion.tsx:116

The expandable content section of an accordion item. Must be a direct child of AccordionItem.

Features smooth animation through the CollapsiblePrimitive component.

Parameters

Parameter	Type
__namedParameters	AccordionContentProps & RefAttributes<HTMLDivElement>

Returns

Element

Example

<AccordionContent>
  Content that will be revealed when the accordion item is expanded.
</AccordionContent>