Accordion

Organizes content into collapsible sections, allowing users to focus on one section at a time.

Structure

	<script lang="ts">
	import { Accordion } from "bits-ui";
</script>
 
<Accordion.Root>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Content />
	</Accordion.Item>
</Accordion.Root>
	

API Reference

Accordion.Root

The root accordion component used to set and manage the state of the accordion.

Property Type Description
multiple
boolean

Whether or not multiple accordion items can be active at the same time.

Default: false
disabled
boolean

Whether or not the accordion is disabled.

Default: false
value
union

The active accordion item value.

Default:  —— undefined
onValueChange
function

A callback function called when the active accordion item value changes.

Default:  —— undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-orientation
enum

The orientation of the accordion.

data-accordion-root

Present on the root element.

Accordion.Item

An accordion item.

Property Type Description
value
*
Required
string

The value of the accordion item.

Default:  —— undefined
disabled
boolean

Whether or not the accordion item is disabled.

Default: false
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The state of the accordion item.

data-disabled

Present when the accordion item is disabled.

data-accordion-item
——

Present on the item element.

Accordion.Header

The accordion item header, which wraps the trigger and makes it more accessible.

Property Type Description
level
enum

The heading level to use for the header. This will be set as the aria-level attribute.

Default:  —— undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-heading-level
enum

The heading level of the header.

data-accordion-header
——

Present on the header element.

Accordion.Trigger

The accordion item trigger, which opens and closes the accordion item.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The state of the accordion item.

data-disabled
——

Present when the accordion item is disabled.

data-value
——

The value of the accordion item.

data-accordion-trigger
——

Present on the trigger element.

Accordion.Content

The accordion item content, which is displayed when the item is open.

Property Type Description
transition
function

A Svelte transition function to use when transitioning the content in and out.

Default:  —— undefined
transitionConfig
TransitionConfig

The configuration to apply to the transition.

Default:  —— undefined
inTransition
function

A Svelte transition function to use when transitioning the content in and out.

Default:  —— undefined
inTransitionConfig
TransitionConfig

The configuration to apply to the transition.

Default:  —— undefined
outTransition
function

A Svelte transition function to use when transitioning the content in and out.

Default:  —— undefined
outTransitionConfig
TransitionConfig

The configuration to apply to the transition.

Default:  —— undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The state of the accordion item.

data-disabled
——

Present when the accordion item is disabled.

data-value
——

The value of the accordion item.

data-accordion-content
——

Present on the content element.

Examples

Multiple

Multiple accordion items open at the same time using the multiple prop.

	<Accordion.Root multiple>
	<!-- ... -->
</Accordion.Root>
	

Controlled

You can programmatically control the active of the accordion item(s) using the value prop.

	<script lang="ts">
	let value = "item-1";
</script>
 
<Accordion.Root bind:value>
	<Accordion.Item value="item-1">
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Content />
	</Accordion.Item>
	<Accordion.Item value="item-2">
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Content />
	</Accordion.Item>
</Accordion.Root>