Show · Collapsible
The collapsible component is a container component used to put long sections of information under a block that can be expanded or collapsed.

When to use

  • Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including: Navigation, Collapse, Tree, TreeSelect, and Typography.
  • When the above components do not meet requirements or customized collapsed behavior, you can use Collapsible to put in contents that need to be expanded or folded.


How to import

Basic Usage

Use isOpen to control the expansion or folding of the content.

Custom Animation Duration

You can use duration to set animation duration or turn off animation by setting motion={false}.

Nested use

Custom CollapseHeight

You could use collapseHeight to customize collapsed height. v>=1.0.0

API reference

classNameClass namestring-0.34.0
collapseHeightCollapse heightnumber01.0.0
durationTime of animation executionnumber250-
isOpenToggle whether to expand the content areabooleanfalse-
keepDOMWhether to keep the hidden panel in DOM tree, destroyed by defaultbooleanfalse0.25.0
lazyRenderUsed with keepDOM, when true, the component will not be rendered when mountingbooleanfalse2.54
motionToggle whether to turn on animationMotiontrue-
onMotionEndAnimation end callback() => void--
reCalcKeyWhen reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.number | string-1.5.0
styleStyle objectCSSProperties-0.34.0



  • Collapsible has id props, the value passed in will be set as the id of the wrapper element, which can be used with other components' aria-controls to indicate the control relationship, see the usage example below.


  • Why Collapsible does not expand as expected?
    Check if the display of parent item of Collapsible once was set to none. In this case, Collapsible could not get height of node properly. If this is not the issue, contact Semi developers to see if other issues exist.