Collapsible
An interactive component which expands/collapses a panel.
Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
defaultOpen | boolean | false |
disabled | boolean | false |
open | boolean | undefined |
| Event | Type |
|---|---|
update:open | [_open: boolean] |
| Slot (default) | Type |
|---|---|
open | boolean |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-disableds] | Present when disabled |
Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-disableds] | Present when disabled |
Content
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
forceMount | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-disableds] | Present when disabled |
| CSS Variable | Description |
|---|---|
--destyler-collapsible-content-width | The width of the content when it opens/closes |
--destyler-collapsible-content-height | The height of the content when it opens/closes |