Skip to main content

Collapsible

An interactive component which expands/collapses a panel.

@thomasglopes starred 3 repositories
melt-ui/melt-ui

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.

@thomasglopes starred 3 repositories
melt-ui/melt-ui

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.

See Bring Your Own Store

onOpenChange -
ChangeFn<boolean>

A callback called when the value of the open store should be changed.

See Change Functions

Elements

Element Description

The builder store used to create the collapsible root.

The builder store used to create the collapsible content.

The builder store used to create the collapsible trigger.

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]

'open' | 'closed'

[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]

'open' | 'closed'

[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]

'open' | 'closed'

[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