| 1 | ---
|
| 2 | title: Accordion
|
| 3 | storybookPath: data-display-accordion--single
|
| 4 | isExperimentalPackage: true
|
| 5 | ---
|
| 6 |
|
| 7 | Accordions are a set of vertically stacked headings which can be toggled to
|
| 8 | reveal some associated section of content.
|
| 9 |
|
| 10 | ## Example
|
| 11 |
|
| 12 | ```jsx live
|
| 13 | <Accordion type="single" collapsible>
|
| 14 | <AccordionItem value="item-1" label="What is this?" level="4">
|
| 15 | <Text>This is an example accordion</Text>
|
| 16 | </AccordionItem>
|
| 17 | <AccordionItem value="item-2" label="Should I click this?" level="4">
|
| 18 | <Text>Yes</Text>
|
| 19 | </AccordionItem>
|
| 20 | <AccordionItem value="item-3" label="What is in it for me?" level="4">
|
| 21 | <Text>A nice accordion</Text>
|
| 22 | </AccordionItem>
|
| 23 | </Accordion>
|
| 24 | ```
|
| 25 |
|
| 26 | ## Props
|
| 27 |
|
| 28 | ### Accordion
|
| 29 |
|
| 30 | The root of the accordion block containing all parts of the accordion.
|
| 31 |
|
| 32 | <PropsTable displayName="Accordion" />
|
| 33 |
|
| 34 | Additional `div` props are passed to the primitive
|
| 35 | [radix accordion root](https://www.radix-ui.com/docs/primitives/components/accordion#root)
|
| 36 | component and are not listed.
|
| 37 |
|
| 38 | ### AccordionItem
|
| 39 |
|
| 40 | An accordion item section containing heading and collapsible content.
|
| 41 |
|
| 42 | <PropsTable displayName="AccordionItem" />
|
| 43 |
|
| 44 | [data-attribute-map]:
|
| 45 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|