Collapsible
An interactive component which expands/collapses a panel.
Features
- Full keyboard navigation
- Svelte transition support
- Can be controlled or uncontrolled
Anatomy
- Root: The root container for the collapsible
- Trigger: The element that triggers the collapsible to expand/collapse
- Content: The element that is revealed when the collapsible is expanded
API Reference
createCollapsible
Props
| Prop | Default | Type / Description |
open | false | boolean |
disabled | false | boolean |
Returned Props
| Returned Prop | Type | Description |
open | Writable<boolean> | A writable store that controls the open state of the collapsible. |
disabled | Writable<boolean> | A writable store that controls whether or not the collapsible is disabled. |
root | - | The builder store used to create the collapsible root. |
content | - | The builder store used to create the collapsible content. |
trigger | - | The builder store used to create the collapsible trigger. |
root
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-disabled] | Present when the element is disabled. |
[data-melt-collapsible] | Present on all collapsible root elements. |
trigger
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-disabled] | Present when the trigger is disabled. |
[data-melt-collapsible-trigger] | Present on all collapsible trigger elements. |
content
Data Attributes
| Data Attribute | Value |
[data-melt-collapsible-content] | Present on all collapsible content elements. |
[data-state] |
|
[data-disabled] | Present when the element is disabled. |
Accessibility
Adheres to the Disclosure WAI-ARIA design pattern
| Key | Behavior |
| Space | Activates the trigger and toggles the visibility of the collapsible content |
| Enter | Activates the trigger and toggles the visibility of the collapsible content |
On This Page