Accordion

Organizes content into collapsable sections.

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>

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

Component API

Root

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

Prop	Default	Type/Description
`multiple`	`false`	`boolean` Whether or not multiple accordion items can be active at the same time.
`disabled`	`false`	`boolean` Whether or not the accordion is disabled.
`value`	-	`string \| undefined` The active accordion item value.
`onValueChange`	-	`(value: string \| undefined) => void` A callback function called when the active accordion item value changes.
`value`	-	`string \| undefined` The active accordion item value when `multiple` is true.
`onValueChange`	-	`(value: string[]) => void` A callback function called when the active accordion item value changes when `multiple` is true.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the accordion.
`data-melt-accordion`	Present on the root element.

Item

An accordion item.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`value`	-	`string` The value of the accordion item.
`disabled`	`false`	`boolean` Whether or not the accordion item is disabled.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The state of the accordion item.
`data-disabled`	Present when the accordion item is disabled.

Trigger

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The state of the accordion item.
`data-disabled`	Present when the accordion item is disabled.
`data-value`	The value of the accordion item.

Content

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The state of the accordion item.
`data-disabled`	Present when the accordion item is disabled.
`data-value`	The value of the accordion item.