Developer mode
Opens components on the React tab by default.
Your bookmarks

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>

Props

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

Name Type Default Description
onExpand () => void | Promise Callback (along with sectionId) that is triggered when section is expanding
expanded boolean 0 Optional prop to control expanded state for AccordionSections
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

AccordionSection

import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
Usage:
<Accordion onExpand={onExpand} expanded={expanded}>
  <AccordionSection id="0X1">Hello World!</AccordionSection>
</Accordion>
<Accordion loading>
  <AccordionSection id="0X1">Loading...</AccordionSection>
</Accordion>
Props
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 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

enum

titleAs
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"
"div"