Collapsible
Component | Source Code
extends ContentboxProps
Props Inheritance Hierarchy: ComponentPropsWithRef<“div”> -> FlexboxProps -> ContentboxProps
A wrapper that allows its children to be collapsed by clicking on the heading of the Collapsible. To support accessibility, the Collapsible can be controlled by navigating to and activating the chevron button in the heading of the Collapsible.
By default, the Collapsible will remove its children from the DOM when the content
is collapsed. If you need to retain some state in the children of the Collapsible
even when it’s collapsed, you can modify the collapse behaviour with the collapseBehaviour
prop.
Properties
Section titled “Properties”collapseBehaviour?: HideBehaviour
Section titled “collapseBehaviour?: HideBehaviour”(Optional, defaults to HideBehaviour.Remove) How the Collapsible hides its content when collapsed.
defaultIsCollapsed?: boolean
Section titled “defaultIsCollapsed?: boolean”Whether the collapsible starts collapsed. This will only apply if the Collapsible is uncontrolled. If you’re
setting isCollapsed to control the Collapsible, just make your initial value for isCollapsed the default
you want.
direction?: “row” | “column”
Section titled “direction?: “row” | “column””(Optional, defaults to row) The direction that the contents of the Flexbox
flow.
filled?: boolean
Section titled “filled?: boolean”(Optional, defaults to false). Whether the box should have a marker class that indicates it should be filled
(have a background color).
heading?: ReactNode
Section titled “heading?: ReactNode”The heading that appears for the Collapsible. It’s recommended to always put something here so it’s clear what the Collapsible is for when it’s collapsed.
horizontalAlignment?: HorizontalAlignment
Section titled “horizontalAlignment?: HorizontalAlignment”isCollapsed?: boolean
Section titled “isCollapsed?: boolean”Whether the collapsible is currently collapsed. Setting this makes the Collapsible controlled and you
must keep this value updated. Use onChangeCollapsed to listen for state change requests.
onChangeCollapsed?: Function
Section titled “onChangeCollapsed?: Function”What to do when the user indicates they want to change whether the Collapsible is collapsed.
reverseDirection?: boolean
Section titled “reverseDirection?: boolean”(Optional, defaults to false) Whether the flow direction of the Flexbox’s
contents should be reversed.
reverseWrap?: boolean
Section titled “reverseWrap?: boolean”spacing?: string
Section titled “spacing?: string”(Optional, defaults to 0.5rem) How much space to put between the contents of
the Flexbox.
verticalAlignment?: VerticalAlignment
Section titled “verticalAlignment?: VerticalAlignment”wrap?: boolean
Section titled “wrap?: boolean”(Optional, defaults to false) Whether the contents of the Flexbox should
wrap.