Show · Collapse
Collapse
Display content areas can be expanded or folded.

Demos

How to import

Basic Usage

You can expand multiple panels at the same time, and use defaultActiveKey to set the panel to expand by default.

Accordion

Use accordion to restrict one panel only to be expanded at one time.

Disable Panel

Use disabled to disabled panel.

Hide The Panel Icon

Use showArrow to hide the panel icon.

Custom Icon

You can use expandIcon to set the expanding icon and collapseIcon for folded icon.

Custom Extra Content on the Right-upper Corner

You can use extra to set extra content on the right-upper corner.
Only works when header is string. If header is a ReactNode, it will take the entire header part including extra so that you could render whatever you need.

API reference

Collapse

PropertiesInstructionstypeDefaultversion
accordionAccordion modebooleanfalse-
activeKeyControlled property, key of the currently expanded panelstring | string[]--
classNameclassName of Collapsestring''-
clickHeaderToExpandClick Header to expand and collapse, otherwise only respond to click arrowbooleantrue2.32.0
collapseIconCustom collapsing iconsReactNode<IconChevronDown />-
defaultActiveKeyKey of the expanded panel when initializedstring | string[]--
expandIconCustom expanding iconReactNode<IconChevronUp />-
keepDOMWhether to keep the hidden panel in DOM tree, destroyed by defaultbooleanfalse0.25.0
motionToggle whether to have animationbooleantrue1.4.0
expandIconPositionExpand icon positionleft, rightright1.12.0
lazyRenderUsed with keepDOM, when true, the component will not be rendered when mountingbooleanfalse2.54.1
styleInline CSS styleCSSProperties{}-
onChangeCallback function when switching panelfunction(activeKey: string | string[], e: event)--

Collapse.Panel

PropertiesInstructionstypeDefaultversion
classNameclassName of Panelstring-
disabledIf true, the panel is disabledbooleanfalsev2.17.0
extraCustom rendering of the auxiliary content in the upper right-hand corner of each panel(only work when header is string)ReactNode-
headerPanel head contentReactNode--
itemKeyRequired and must be unique, used to match activeKey, defaultActiveKeystring-
onMotionEndAnimation end callback() => void-2.47.0-beta.0
reCalcKeyWhen reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.string | number-1.5.0
showArrowwhether to show arrows iconbooleantruev2.17.0
styleinline CSS styleCSSProperties-

Accessibility

ARIA

  • The button on the right side of the panel header is set to aria-hidden=true
  • The interactive part of the panel header is set to the aria-owns value corresponding to the panel content
  • The content of the panel is set with aria-hidden, and its value is automatically switched between true and false with the display of the panel content
  • The panel aria-disabled is synchronized with the disabled property, indicating that the panel is disabled

Content Guidelines

The essence of the folding panel is that the card container adds the function of folding and unfolding, so the copywriting specification of the folding panel needs to be the same as the Card copywriting specification

Design Tokens

FAQ

  • Why is the data in Form cleared when using Collapse?
    When Collapse is collapsed, the related DOM is destroyed and so are the fields data stored in Form. You could set keepDOM=true to keep the DOM from being destroyed.
  • Collapse.Header as a whole is used as a click hot zone for folding and expanding. If a custom element (such as Input) is placed in the Header, it will cause Collapse to collapse/expand when clicked. How to avoid it?
    You can prevent the event from bubbling to Collapse.Header in the onClick event callback of the custom element. If the custom element does not provide an event object, wrap a layer of div to prevent bubbling in the div onClick.