Collapse

A vertically stacked set of interactive headings that each reveal a section of content.

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Supports Right to Left direction.
Can expand one or multiple items.
Can be controlled or uncontrolled.

Install

Import

API

Root

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
collapsible	`boolean`	false
defaultValue	`string \| string[]`	undefined
dir	`Direction`	ltr
disabled	`boolean`	false
modelValue	`string \| string[]`	undefined
orientation	`DataOrientation`	vertical
type	`'single' \| 'multiple'`	-

Event	Type
update:modelValue	`[_value: string \| string[]]`

Slot (default)	Type
modelValue	`string \| string[] \| undefined`

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

Item

Props	Type	Default
asChild	`boolean`	false
disabled	`boolean`	false
value	`string`	on

Slot (default)	Type
open	`boolean`

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-disabled]	Present when disabled
[data-state]	'open' \| 'closed'

Props	Type	Default
as	`AsTag \| Component`	h3
asChild	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-disabled]	Present when disabled
[data-state]	'open' \| 'closed'

Trigger

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-disabled]	Present when disabled
[data-state]	'open' \| 'closed'

Content

Props	Type	Default
asChild	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-disabled]	Present when disabled
[data-state]	'open' \| 'closed'

CSS Variable	Description
--destyler-collapse-content-width	The width of the content when it opens/closes
--destyler-collapsible-content-width	The height of the content when it opens/closes