To implement Accordion component into your project you’ll need to the import the Accordion and the AccordionSection:
import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
After adding import into your project you can use it simply like:
<Accordion>
<AccordionSection>Hello World!</AccordionSection>
</Accordion>
| Name | Type | Required | Default | Description |
|---|
| children | React.ReactNode | | | The content of the Accordion. You can use only AccordionSection |
| expandedSection | string \| number | | | Optional prop to control which AccordionSection (by id) is expanded |
| loading | boolean | | | If true it will render the Loading component |
| onExpand | (sectionId: string \| number) => void \| Promise<any> | | | Callback (along with sectionId) that is triggered when section is expanding |
| dataTest | string | | | |
| id | string | | | Set id for Accordion |
| spaceAfter | "none" \| "smallest" \| "small" \| "normal" \| "medium" \| "large" \| "largest" | | | |
| Name | Type | Required | Default | Description |
|---|
| id | string \| number | | | |
| children | React.ReactNode | | | |
| actions | React.ReactNode | | | |
| expanded | boolean | | | |
| expandable | boolean | | | |
| expandOnTileClick | boolean | | false | If true, enables mobile-first interaction where the entire header area becomes clickable for expansion. |
| onExpand | Common.Callback | | | |
| header | React.ReactNode | | | |
| footer | React.ReactNode | | | |
| dataTest | string | | | |
| Callback |
|---|
() => void \| Promise<void> |