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

Collapse / React

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.

Name Type Default Description
actions React.Node Actions which will be render next to arrow.
children React$Node The children that should be collapsed.
dataTest string Optional prop for testing purposes.
expanded boolean If you pass either true or false the Collapse component will controlled component and you will have to manage the state via onClick.
initialExpanded boolean false If true the Collapse component will be expanded on the initial render.
label Translation The rendered label of the Collapse.
onClick (event, state) => void | Promise Callback for handling onClick event.