base-ui-svelte
GitHub (opens in new tab)

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

View as Markdown

Unstyled accessible components for design systems and apps.

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.

Accordion.Root

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

Props

value AccordionValue —
Name
value
Description

Controlled value.

Type
AccordionValue | undefined
defaultValue AccordionValue —
Name
defaultValue
Description

Uncontrolled initial value.

Type
AccordionValue
onValueChange function —
Name
onValueChange
Description

Event handler called when the value changes.

Type
((value: AccordionValue) => void) | undefined
multiple boolean false
Name
multiple
Description

Whether multiple items can be open at the same time.

Type
boolean
Default
false
disabled boolean false
Name
disabled
Description

Whether the control ignores user interaction.

Type
boolean
Default
false
orientation AccordionOrientation 'horizontal'
Name
orientation
Description

Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior.

Type
AccordionOrientation
Default
'horizontal'
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet<[{ openValues: string[] }]>

Data attributes

AttributeDescription
data-disabledPresent when the accordion is disabled.
data-orientationIndicates the orientation of the accordion.

Accordion.Header

A heading that labels the corresponding panel. Renders an <h3> element.

Props

render string —
Name
render
Description

HTML element tag to render instead of the default host element.

Type
string
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Accordion.Item

Groups an accordion header with the corresponding panel. Renders a <div> element.

Props

value string —
Name
value
Description

Controlled value.

Type
string
disabled boolean false
Name
disabled
Description

Whether the control ignores user interaction.

Type
boolean
Default
false
onOpenChange function —
Name
onOpenChange
Description

Event handler called when the open state changes.

Type
((open: boolean, eventDetails: { reason: 'trigger-press'
| 'imperative' }) => void)
| undefined
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet<[{ open: boolean; disabled: boolean }]>

Data attributes

AttributeDescription
data-closedPresent when the part is closed.
data-disabledPresent when the accordion item is disabled.
data-openPresent when the accordion item is open.

Accordion.Panel

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

Props

keepMounted boolean false
Name
keepMounted
Description

Whether to keep the element in the DOM while the panel is closed. This prop is ignored when hiddenUntilFound is used.

Type
boolean
Default
false
hiddenUntilFound boolean false
Name
hiddenUntilFound
Description

Use the hidden="until-found" attribute when collapsed.

Type
boolean
Default
false
role string —
Name
role
Description

—

Type
string | undefined
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Data attributes

AttributeDescription
data-closedPresent when the part is closed.
data-ending-stylePresent when the panel is animating out.
data-openPresent when the accordion panel is open.
data-starting-stylePresent when the panel begins animating in.

Accordion.Trigger

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

Props

children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Data attributes

AttributeDescription
data-disabledPresent when the accordion item is disabled.
data-panel-openPresent when the accordion panel is open.