Collapse

Collapse display a list of high-level options that can expand/collapse to reveal more information.

import { Collapse } from '@nextui-org/react';

Default

The Collapse.Group behavior is like an accordion by default.

No Accordion

You can disable the accordion behavior with the accordion property.

Initial Expanded

You can use the initialExpanded property to expand an item by default.

With subtitle

You can add the subtitle property to the Collapse component to give more details.

Shadow

You can add a shadow effect with the property shadow.

Bordered

You can change the full style towards a bodered Collapse with the bordered property.

Splitted

You can change the full style towards a separated Collapse with the splitted property.

Custom Arrow

You can set a custom arrow with the arrowIcon property.

Content Left

You can put any content at the begining of the Collapse with the contentLeft property.

No Divider

You can remove the Collapse divider with the divider property.

Disabled

You can disable an specific Collapse item with the disabled property.

No Animated

You can disable the entire animation with the animated property.

APIs

Collapse Props

AttributeTypeAccepted valuesDescriptionDefault
initialExpandedbooleantrue/falseExpand or not the collapse at the beginningfalse
titlestring React.ReactNode-Collapse title content-
subtitlestring React.ReactNode-Collapse description content-
dividerbooleantrue/falseShow or hide the collapse dividertrue
disabledbooleantrue/falseDisable collapsefalse
borderedbooleantrue/falseBordered collapsefalse
shadowbooleantrue/falseEnable or disable the collapse shadowfalse
animatedbooleantrue/falseEnable or disable the collapse animationtrue
showArrowbooleantrue/falseShow or hide the collapse right arrowtrue
arrowIconReact.ReactNode-Collapse arrow icon-
contentLeftReact.ReactNode-Left content for the collapse-
borderWeightNormalWeightsNormalWeightsBorder weight for bordered collapselight
indexnumber-Collapse's index, this value it's autogenerated by default-
preventDefaultbooleantrue/falsePrevent default event on when is selected through the Space, Enter keystrue
onChange(e: React.ChangeEvent, index:number, value: boolean) => void-Callback fired when the value is changed-
...HTMLAttributes'id', 'className', ...Div native props-

Collapse.Group props

AttributeTypeAccepted valuesDescriptionDefault
accordionbooleantrue/falseExpand children collapse like an accordiontrue
animatedbooleantrue/falseEnable or disable the collapse group animationtrue
borderedbooleantrue/falseBordered collapse groupfalse
splittedbooleantrue/falseSeparated collapse groupfalse
shadowbooleantrue/falseEnable or disable the collapse group shadowfalse
dividerbooleantrue/falseShow or hide the collapse group children divider-
borderWeightNormalWeightsNormalWeightsBorder weight for bordered collapse grouplight
onChange(index:number, value: boolean) => void-Callback fired when a collapse children value is changed-
...HTMLAttributes'id', 'className', ...Div native props-

Collapse types

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold';