Accordion / React

Groups related long content into sections shown one at a time.

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>

Table below contains all types of the props available in the Accordion component.

Name	Type	Description
onExpand	`() => void \| Promise`	Callback (along with sectionId) that is triggered when section is expanding
expandedSection	`string` or `number`	Optional prop to control which AccordionSection (by `id`) is expanded
children	`React.ChildrenArray<React.Element<typeof AccordionSection>>`	The content of the Accordion. You can use only AccordionSection
dataTest	`string`	Optional prop for testing purposes
loading	`boolean`	If `true` it will render the Loading component
spaceAfter	`enum`	Additional `margin-bottom` after component. See this docs

import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";

<Accordion onExpand={onExpand} expanded={expanded}>
  <AccordionSection id="0X1">Hello World!</AccordionSection>
</Accordion>

<Accordion loading>
  <AccordionSection id="0X1">Loading...</AccordionSection>
</Accordion>

Name	Type	Default	Description
id	`string \| number`		Identificator used to determine active section when using with controlled state
actions	`React.Node`		Actions which will be rendered on the right side
children	`React.Node`		The content of the AccordionSection.
dataTest	`string`		Optional prop for testing purposes.
expandable	`boolean`	`true`	If set to `false` `actions` will not be displayed
header	`React.Node`		The header of the AccordionSection. Useful when you need different layout than combination of e.g. `title` and `description` properties.
footer	`React.Node`		The sticky footer of the AccordionSection. Useful for navigation buttons