Docs
Accordion
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Usage
Example Code
1import {
2 Accordion,
3 AccordionContent,
4 AccordionItem,
5 AccordionTrigger,
6} from "inc-design-system/accordion";Example Code
1<Accordion>
2 <AccordionItem value="contentOne">
3 <AccordionTrigger>
4 <h1 className="text-lg font-bold">Open Accordion</h1>
5 </AccordionTrigger>
6 <AccordionContent>
7 <p>Content 1</p>
8 </AccordionContent>
9 </AccordionItem>
10</Accordion>Props
Accordion
For more props:
| Prop | Type | Description | Default |
|---|---|---|---|
| single | boolean | Determines whether you want only a single item to be opened at once. If true, when the user opens one accordion, other accordions which are opened will close. | false |
| disabled | boolean | Disabled styling. | false |
| children | React.ReactNode | Children that are passed. | - |
AccordionItem
For more props:
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Children that are passed. | - |
| className | string | Classname that is passed. | - |
| value | string | Value that is passed. | - |
AccordionTrigger
For more props:
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Children that are passed. | - |
| className | string | Classname that is passed. | - |
AccordionContent
For more props:
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Children that are passed. | - |
| className | string | Classname that is passed. | - |