Accordion

Organizes content into collapsible sections.

	<script lang="ts">
  import * as Accordion from "@/components//ui/accordion";
</script>
 
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
  <Accordion.Item value="item-1">
  <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
  <Accordion.Content
    >Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content
  >
  </Accordion.Item>
  <Accordion.Item value="item-2">
  <Accordion.Trigger>Is it styled?</Accordion.Trigger>
  <Accordion.Content>
    Yes. It comes with default styles that matches the other components'
    aesthetic.
  </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
  <Accordion.Trigger>Is it animated?</Accordion.Trigger>
  <Accordion.Content>
    Yes. It's animated by default, but you can disable it if you prefer.
  </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

	<script lang="ts">
  import * as Accordion from "@/components//ui/accordion";
</script>
 
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
  <Accordion.Item value="item-1">
  <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
  <Accordion.Content
    >Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content
  >
  </Accordion.Item>
  <Accordion.Item value="item-2">
  <Accordion.Trigger>Is it styled?</Accordion.Trigger>
  <Accordion.Content>
    Yes. It comes with default styles that matches the other components'
    aesthetic.
  </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
  <Accordion.Trigger>Is it animated?</Accordion.Trigger>
  <Accordion.Content>
    Yes. It's animated by default, but you can disable it if you prefer.
  </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

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

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`	`string \| undefined`	The active accordion item value. `Default: undefined`
`onValueChange`	`(value: string \| undefined) => void`	A callback function called when the active accordion item value changes. `Default: undefined`
`value`	`string \| undefined`	The active accordion item value when `multiple` is true. `Default: undefined`
`onValueChange`	`(value: string[]) => void`	A callback function called when the active accordion item value changes when `multiple` is true. `Default: undefined`

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

Accordion.Item

An accordion item.

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

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

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`

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

Accordion.Content

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

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

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