Collapsible · base-ui-svelte

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Groups all parts of the collapsible. Renders a <div> element.

Props

open boolean —

defaultOpen boolean false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

disabled boolean false

children snippet —

Data attributes

Attribute	Description
`data-closed`	Present when the collapsible is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the collapsible is open.

A panel with the collapsible contents. Renders a <div> element.

Props

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when hiddenUntilFound is used.
Type: boolean
Default: false

role string —

children snippet —

Data attributes

Attribute	Description
`data-closed`	Present when the collapsible panel is closed.
`data-ending-style`	Present when the panel is animating out.
`data-open`	Present when the collapsible panel is open.
`data-starting-style`	Present when the panel begins animating in.

A button that opens and closes the collapsible panel. Renders a <button> element.

Props

children snippet —

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.
`data-panel-open`	Present when the collapsible panel is open.