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
Componentization
If you want to create a Collapsible component with reactive props, you can use our sync utilities.
API Reference
createCollapsible
The builder function used to create the collapsible component.
Props
| Prop | Default | Type / Description |
disabled | false | boolean Whether or not the collapsible is disabled. |
forceVisible | false | boolean Whether or not to force the collapsible to always be visible. This is useful for custom transitions and animations using conditional blocks. |
defaultOpen | false | boolean Whether the collapsible is open by default or not. |
open | - | Writable<boolean> A writable store that controls whether or not the collapsible is open. |
onOpenChange | - | ChangeFn<boolean> A callback called when the value of the See Change Functions |
Elements
States
| State | Description |
open | A writable store with the current open state of the collapsible. |
Options
| Option | Description |
disabled | Whether or not the collapsible is disabled. |
forceVisible | Whether or not to force the collapsible to always be visible. This is useful for custom transitions and animations using conditional blocks. |
root
The root collapsible element.
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
The collapsible trigger element.
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. |
Custom Events
| Event | Value |
m-click | (e: ) => void |
content
The collapsible content element.
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