Layout

Collapsible

A collapsible allows users to hide or display a section of content.

View source

Props

NameTypeDefaultDescription
idrequiredstring
Unique identifier for the Collapsible
actionsIActionOptions[]
addedSelectedOptionIDropdownOption
attributeToFormatstring
attributeToSortstring
calendarIdstring
childrenReactNode
classNamestring
Additionnal CSS classes for the outer most container of the Collapsible
collapsibleToggleIconReactNode
Set to render a custom toggle icon
colorstring
currentOptionnumber
dateDate
disabledbooleanfalse
Whether the collapsible is disabled
disabledValuesstring[]
expandedboolean
expandedOnMountbooleanfalse
Whether the collapsible is expanded on mount
facetstring
facetRowIFacet
filterTextstring
headerClassesstring
Additionnal CSS classes for the header
headerContentReactNode
Custom JSX inside the header
idsstring[]
initialPerPagenumber
initialTableDataITableData
isCollapsibleboolean
isDirtyboolean
isInErrorboolean
isOpenboolean
isRangeboolean
isSelectedboolean
itemstring
labelstring
limitstring
onClick() => void
Callback called when container is clicked
optionsIInlinePromptOptions
pageNbnumber
perPagenumber
predicatesITablePredicate[]
searchingboolean
selectedstring
shouldResetPageboolean
tableIdstring
tableStateModifierITableStateModifier
toggleIconClassNamestring
Additionnal CSS classes for the toggle icon
totalEntriesnumber
totalPagesnumber
validboolean
valuestring
withBordersbooleanfalse
Whether the collapsible has borders
yPositionnumber

Examples

No guidelines exist for CollapsibleConnected yet.

Create guidelines