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

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:

  <AccordionSection>Hello World!</AccordionSection>


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
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 loading>
  <AccordionSection id="0X1">Loading...</AccordionSection>
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