UNPKG

1.28 kBMarkdownView Raw
1---
2title: Accordion
3storybookPath: data-display-accordion--single
4isExperimentalPackage: true
5---
6
7Accordions are a set of vertically stacked headings which can be toggled to
8reveal 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
30The root of the accordion block containing all parts of the accordion.
31
32<PropsTable displayName="Accordion" />
33
34Additional `div` props are passed to the primitive
35[radix accordion root](https://www.radix-ui.com/docs/primitives/components/accordion#root)
36component and are not listed.
37
38### AccordionItem
39
40An 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