Hides long or complex information under a block that can be hidden.


To implement Collapse component into your project you’ll need to add the import:

import Collapse from "@kiwicom/orbit-components/lib/Collapse";

After adding import into your project you can use it simply like:

<Collapse label="Duration">
<Slider defaultValue={5} onChange={value => doSomething(value)} />


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

actionsReact.NodeActions which will be render next to arrow.
childrenReact.NodeThe children that should be collapsed.
idstringSet id for Collapse
dataTeststringOptional prop for testing purposes.
expandedbooleanIf you pass either true or false the Collapse component will controlled component and you will have to manage the state via onClick.
initialExpandedbooleanfalseIf true the Collapse component will be expanded on the initial render.
labelTranslationThe rendered label of the Collapse.
customLabelReact.NodeThe rendered custom label of the Collapse.
onClick(event, state) => void \| PromiseCallback for handling onClick event.