Collapse

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

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

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

You can disable the accordion behavior with the accordion property.

You can use the expanded property to expand an item.

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

You can add a shadow effect with the property shadow.

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

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

You can set a custom arrow with the arrowIcon property.

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

You can remove the Collapse divider with the divider property.

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

You can disable the entire animation with the animated property.

Attribute	Type	Accepted values	Description	Default
expanded	`boolean`	`true/false`	Manage the expand behaivor by prop	`false`
title	`string` `React.ReactNode`	-	Collapse title content	-
subtitle	`string` `React.ReactNode`	-	Collapse description content	-
divider	`boolean`	`true/false`	Show or hide the collapse divider	`true`
disabled	`boolean`	`true/false`	Disable collapse	`false`
bordered	`boolean`	`true/false`	Bordered collapse	`false`
shadow	`boolean`	`true/false`	Enable or disable the collapse shadow	`false`
animated	`boolean`	`true/false`	Enable or disable the collapse animation	`true`
showArrow	`boolean`	`true/false`	Show or hide the collapse right arrow	`true`
arrowIcon	`React.ReactNode`	-	Collapse arrow icon	-
contentLeft	`React.ReactNode`	-	Left content for the collapse	-
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` collapse	`light`
index	`number`	-	Collapse's index, this value it's autogenerated by default	-
preventDefault	`boolean`	`true/false`	Prevent default event on when is selected through the `Space, Enter` keys	`true`
onChange	`(e: React.ChangeEvent, index:number, value: boolean) => void`	-	Callback fired when the value is changed	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Div native props	-

Attribute	Type	Accepted values	Description	Default
accordion	`boolean`	`true/false`	Expand children collapse like an accordion	`true`
animated	`boolean`	`true/false`	Enable or disable the collapse group animation	`true`
bordered	`boolean`	`true/false`	Bordered collapse group	`false`
splitted	`boolean`	`true/false`	Separated collapse group	`false`
shadow	`boolean`	`true/false`	Enable or disable the collapse group shadow	`false`
divider	`boolean`	`true/false`	Show or hide the collapse group children divider	-
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` collapse group	`light`
onChange	`(index:number, value: boolean) => void`	-	Callback fired when a collapse children value is changed	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Div native props	-

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