Accordion

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

Name	Type	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`	`false`	If true it will render the Loading component. When `true`, either `loadingTitle` or `loadingHidden` must be provided.
loadingTitle	`string`		The title announced by screen readers when the accordion is in loading state. Required when `loading` is `true` and `loadingHidden` is not `true`.
loadingHidden	`boolean`		If `true`, the loading state will be hidden from screen readers. Required when `loading` is `true` and `loadingTitle` is not provided.
onExpand	`(sectionId: string \\| number) => void \\| Promise<any>`		Callback (along with sectionId) that is triggered when section is expanding
dataTest	`string`		Optional prop for testing purposes
id	`string`		Set `id` for `Accordion`
spaceAfter	`"none" \\| "smallest" \\| "small" \\| "normal" \\| "medium" \\| "large" \\| "largest"`		Additional space after the component

Name	Type	Default	Description
id	`string`		Unique identifier for the section, used by `expandedSection`
children	`React.ReactNode`		The content of the AccordionSection
actions	`React.ReactNode`		Additional actions to be displayed in the header
expandable	`boolean`	`true`	Whether the section can be expanded
expandOnTileClick	`boolean`	`false`	Enables mobile-first interaction where the entire header area becomes clickable for expansion
header	`React.ReactNode`		The content of the section header
footer	`React.ReactNode`		Additional content to display at the bottom of an expanded section
dataTest	`string`		Optional prop for testing purposes

By default, the Accordion component operates in an uncontrolled mode. For programmatic control, use the expandedSection and onExpand props together.