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

Data Attribute	Value
`[data-scope]`	accordion
`[data-part]`	root
`[data-orientation]`	The orientation of the accordion

ItemContent

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

Data Attribute	Value
`[data-scope]`	accordion
`[data-part]`	item-content
`[data-state]`	"open" \| "closed"
`[data-disabled]`	Present when disabled
`[data-focus]`	Present when focused
`[data-orientation]`	The orientation of the item

ItemIndicator

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

Data Attribute	Value
`[data-scope]`	accordion
`[data-part]`	item-indicator
`[data-state]`	"open" \| "closed"
`[data-disabled]`	Present when disabled
`[data-focus]`	Present when focused
`[data-orientation]`	The orientation of the item

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.

Data Attribute	Value
`[data-scope]`	accordion
`[data-part]`	item
`[data-state]`	"open" \| "closed"
`[data-focus]`	Present when focused
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the item

ItemTrigger

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

Data Attribute	Value
`[data-scope]`	accordion
`[data-part]`	item-trigger
`[data-orientation]`	The orientation of the item
`[data-state]`	"open" \| "closed"

Accessibility

Complies with the Accordion WAI-ARIA design pattern.

Keyboard Support

Key	Description
`Space`	When focus is on an trigger of a collapsed item, the item is expanded
`Enter`	When focus is on an trigger of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element
`Shift + Tab`	Moves focus to the previous focusable element
`ArrowDown`	Moves focus to the next trigger
`ArrowUp`	Moves focus to the previous trigger.
`Home`	When focus is on an trigger, moves focus to the first trigger.
`End`	When focus is on an trigger, moves focus to the last trigger.