Collapse
Collapse is used to show and hide a single content area.
Installation
npx jsx-daisyui add collapseDefault
collapse-default
Click to open/close
This collapse uses the focus method — click outside to close it.
Arrow icon
collapse-arrow
Arrow collapse
The chevron rotates when expanded.
Plus icon
collapse-plus
Plus/minus collapse
The icon changes between + and − on toggle.
Checkbox method
collapse-checkbox
Checkbox collapse
Uses a hidden checkbox for state — stays open even when you click away.
Details method
collapse-details
Details/summary collapse
Renders as a native <details> element — works without JavaScript.
Props
Collapse.Root
| Prop | Type | Default | Description |
|---|---|---|---|
icon | 'none' | 'arrow' | 'plus' | 'none' | Icon variant to display on the title. |
open | boolean | - | Forces the collapse to stay open. |
close | boolean | - | Forces the collapse to stay closed. |
method | 'focus' | 'checkbox' | 'details' | 'focus' | The interaction method for opening/closing. |
Collapse.Title
| Prop | Type | Default | Description |
|---|---|---|---|
iconStart | boolean | - | Moves the arrow/plus icon to the start (left) of the title. |