Accordion

A collapsible component for displaying content in a vertical stack.

React

Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice cream bonbon jelly. Jelly topping tiramisu halvah lollipop.

Solid

Svelte

Vue

Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Multiple Panels Open

For an Accordion that allows keeping multiple panels open, apply the multiple prop:

import { ChevronDownIcon } from 'lucide-react'
import { Accordion } from '@ark-ui/react'

export const Multiple = () => {
  return (
    <Accordion.Root defaultValue={['React']} multiple>
      {['React', 'Solid', 'Vue'].map((item) => (
        <Accordion.Item key={item} value={item}>
          <Accordion.ItemTrigger>
            {item}
            <Accordion.ItemIndicator>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            {item} is a JavaScript library for building user interfaces.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

export const Multiple = () => {
  return (
    <Accordion.Root value={['React']} multiple>
      <Index each={['React', 'Solid', 'Vue']}>
        {(item) => (
          <Accordion.Item value={item()}>
            <Accordion.ItemTrigger>
              What is {item()}?
              <Accordion.ItemIndicator>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
import { ChevronDownIcon } from 'lucide-vue-next'

const items = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Accordion.Root multiple>
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.ItemTrigger>
        What is {{ item }}?
        <Accordion.ItemIndicator><ChevronDownIcon /></Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>
        {{ item }} is a JavaScript library for building user interfaces.
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.
`collapsible`	`false`	`boolean` Whether an accordion item can be after it has been expanded.
`defaultValue`		`string[]` The initial value of the accordion when it is first rendered. Use when you do not need to control the state of the accordion.
`disabled`		`boolean` Whether the accordion items are disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string item(value: string): string content(value: string): string trigger(value: string): string }>` The ids of the elements in the accordion. Useful for composition.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`multiple`	`false`	`boolean` Whether multple accordion items can be expanded at the same time.
`onFocusChange`		`(details: FocusChangeDetails) => void` The callback fired when the focused accordion item changes.
`onValueChange`		`(details: ValueChangeDetails) => void` The callback fired when the state of expanded/collapsed accordion items changes.
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` The orientation of the accordion items.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`value`		`string[]` The `value` of the accordion items that are currently being expanded.

ItemContent

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

ItemIndicator

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Item

Prop	Default	Type
`value`		`string` The value of the accordion item.
`asChild`		`boolean` Render as a different element type.
`disabled`		`boolean` Whether the accordion item is disabled.

ItemTrigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.