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

Features

Full keyboard navigation
Supports horizontal and vertical orientation
Right-to-Left (RTL) support
Single or multiple item expansion
Controlled and uncontrolled modes
Collapse each accordion item

Anatomy

To set up the accordion correctly, it's essential to understand its anatomy and the naming of its parts.

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

Examples

Default Expanded State

Set the defaultValue prop to specify which item should be expanded by default.

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

export const Basic = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item 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>
  )
}

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

export const Basic = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(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 { Accordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'

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

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

<script>
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'

  const items = ['React', 'Solid', 'Vue', 'Svelte']
</script>

<Accordion.Root defaultValue={['React']}>
  {#each items as item (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>
  {/each}
</Accordion.Root>

Collapsible

Use the collapsible prop to allow the user to collapse all panels.

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

export const Collapsible = () => {
  return (
    <Accordion.Root defaultValue={['React']} collapsible>
      {['React', 'Solid', 'Vue', 'Svelte'].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 { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export const Collapsible = () => {
  return (
    <Accordion.Root defaultValue={['React']} collapsible>
      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(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 { Accordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'

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

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

<script>
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'
</script>

<Accordion.Root defaultValue={['React']} collapsible>
  {#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
  {/each}
</Accordion.Root>

Multiple Panels

Use the multiple prop to allow multiple panels to be expanded simultaneously.

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

export const Multiple = () => {
  return (
    <Accordion.Root defaultValue={['React']} multiple>
      {['React', 'Solid', 'Vue', 'Svelte'].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 { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export const Multiple = () => {
  return (
    <Accordion.Root defaultValue={['React']} multiple>
      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(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 { Accordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'

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

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

<script>
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'
</script>

<Accordion.Root defaultValue={['React']} multiple>
  {#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
  {/each}
</Accordion.Root>

Horizontal Orientation

By default, the Accordion is oriented vertically. Use the orientation prop to switch to a horizontal layout.

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

export const Horizontal = () => {
  return (
    <Accordion.Root defaultValue={['React']} orientation="horizontal">
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item 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>
  )
}

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

export const Horizontal = () => {
  return (
    <Accordion.Root defaultValue={['React']} orientation="horizontal">
      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(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 { Accordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'

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

<template>
  <Accordion.Root :defaultValue="['React']" orientation="horizontal">
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.ItemTrigger>
        What is {{ item }}?
        <Accordion.ItemIndicator>
          <ChevronRightIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

<script>
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronRightIcon } from 'lucide-svelte'
</script>

<div style="display: flex; max-width: 900px;">
  <Accordion.Root defaultValue={['React']} orientation="horizontal">
    {#each ['React', 'Solid', 'Vue', 'Svelte'] as item (item)}
      <Accordion.Item value={item} style="display: flex; flex-direction: column;">
        <Accordion.ItemTrigger style="min-height: 2rem; writing-mode: vertical-lr;">
          What is {item}?
          <Accordion.ItemIndicator>
            <ChevronRightIcon />
          </Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent style="max-width: 200px;">
          {item} is a JavaScript library for building user interfaces.
        </Accordion.ItemContent>
      </Accordion.Item>
    {/each}
  </Accordion.Root>
</div>

Using the Root Provider

The RootProvider component provides a context for the accordion. It accepts the value of the useAccordion hook. You can leverage it to access the component state and methods from outside the accordion.

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

export const RootProvider = () => {
  const accordion = useAccordion({
    multiple: true,
    defaultValue: ['React'],
  })

  return (
    <>
      <button onClick={() => accordion.setValue(['Vue'])}>Set to Vue</button>

      <Accordion.RootProvider value={accordion}>
        {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
          <Accordion.Item 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.RootProvider>
    </>
  )
}

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

export const RootProvider = () => {
  const accordion = useAccordion({
    multiple: true,
    defaultValue: ['React'],
  })

  return (
    <>
      <button onClick={() => accordion().setValue(['Vue'])}>Set to Vue</button>

      <Accordion.RootProvider value={accordion}>
        <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
          {(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.RootProvider>
    </>
  )
}

<script setup lang="ts">
import { Accordion, useAccordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'

const items = ['React', 'Solid', 'Vue', 'Svelte']

const accordion = useAccordion({
  multiple: true,
  defaultValue: ['React'],
})
</script>

<template>
  <button @click="accordion.setValue(['Vue'])">Set to Vue</button>

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

<script>
  import { Accordion, useAccordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'

  const id = $props.id()
  const accordion = useAccordion({
    id,
    defaultValue: ['React'],
  })
</script>

<div>
  <div>Open items: {JSON.stringify(accordion().value)}</div>
  <Accordion.RootProvider value={accordion}>
    {#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
    {/each}
  </Accordion.RootProvider>
</div>

If you're using the RootProvider component, you don't need to use the Root component.

Accessing context

Use the Accordion.Context component or useAccordionContext hook to access the state of an accordion. It exposes the following properties:

focusedValue: The value of the focused accordion item.
value: The value of the selected accordion items.
setValue: A method to set the selected accordion items.

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

export const Context = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      <Accordion.Context>
        {(context) => (
          <div>
            <span>Selected items: {context.value.join(', ')}</span>
            <span>Focused item: {context.focusedValue}</span>
            <button onClick={() => context.setValue(['React', 'Solid'])}>Set value</button>
          </div>
        )}
      </Accordion.Context>

      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item 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>
  )
}

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

export const Context = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      <Accordion.Context>
        {(context) => (
          <div>
            <span>Selected items: {context().value.join(', ')}</span>
            <span>Focused item: {context().focusedValue}</span>
            <button onClick={() => context().setValue(['React', 'Solid'])}>Set value</button>
          </div>
        )}
      </Accordion.Context>

      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(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>
  )
}

<template>
  <Accordion.Root :defaultValue="['React']">
    <Accordion.Context v-slot="context">
      <div>
        <span>Selected items: {{ context.value.join(', ') }}</span>
        <span>Focused item: {{ context.focusedValue }}</span>
        <button @click="context.setValue(['React', 'Solid'])">Set value</button>
      </div>
    </Accordion.Context>

    <Accordion.Item v-for="item in ['React', 'Solid', 'Vue', 'Svelte']" :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>

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

<script lang="ts">
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'
</script>

<Accordion.Root defaultValue={['React']}>
  <Accordion.Context>
    {#snippet render(context)}
      <div>
        <span>Selected items: {context().value.join(', ')}</span>
        <span>Focused item: {context().focusedValue}</span>
        <button onclick={() => context().setValue(['React', 'Solid'])}>Set value</button>
      </div>
    {/snippet}
  </Accordion.Context>

  {#each ['React', 'Solid', 'Vue', 'Svelte'] as 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>
  {/each}
</Accordion.Root>

Accessing the item context

Use the Accordion.ItemContext component or useAccordionItemContext hook to access the state of an accordion item. It exposes the following properties:

expanded: Whether the accordion item is expanded.
focused: Whether the accordion item is focused.
disabled: Whether the accordion item is disabled.

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

export const ItemContext = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item key={item} value={item}>
          <Accordion.ItemTrigger>
            What is {item}?
            <Accordion.ItemIndicator>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
            <Accordion.ItemContext>
              {(context) => (
                <div style={{ display: 'inline-flex', gap: '0.5rem' }}>
                  <span>Expanded: {String(context.expanded)}</span>
                  <span>Focused: {String(context.focused)}</span>
                  <span>Disabled: {String(context.disabled)}</span>
                </div>
              )}
            </Accordion.ItemContext>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>{item} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

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

export const ItemContext = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      <Index each={['React', 'Solid', 'Vue', 'Svelte']}>
        {(item) => (
          <Accordion.Item value={item()}>
            <Accordion.ItemTrigger>
              What is {item()}?
              <Accordion.ItemIndicator>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
              <Accordion.ItemContext>
                {(context) => (
                  <div style={{ display: 'inline-flex', gap: '0.5rem' }}>
                    <span>Expanded: {String(context().expanded)}</span>
                    <span>Focused: {String(context().focused)}</span>
                    <span>Disabled: {String(context().disabled)}</span>
                  </div>
                )}
              </Accordion.ItemContext>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

<template>
  <Accordion.Root :defaultValue="['React']">
    <Accordion.Item v-for="item in ['React', 'Solid', 'Vue', 'Svelte']" :key="item" :value="item">
      <Accordion.ItemTrigger>
        What is {{ item }}?
        <Accordion.ItemIndicator>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
        <Accordion.ItemContext v-slot="context">
          <div style="display: inline-flex; gap: 0.5rem">
            <span>Expanded: {{ context.expanded }}</span>
            <span>Focused: {{ context.focused }}</span>
            <span>Disabled: {{ context.disabled }}</span>
          </div>
        </Accordion.ItemContext>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

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

<script lang="ts">
  import { Accordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'
</script>

<Accordion.Root defaultValue={['React']}>
  {#each ['React', 'Solid', 'Vue', 'Svelte'] as item}
    <Accordion.Item value={item}>
      <Accordion.ItemTrigger>
        What is {item}?
        <Accordion.ItemIndicator>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
        <Accordion.ItemContext>
          {#snippet render(context)}
            <div style="display: inline-flex; gap: 0.5rem;">
              <span>Expanded: {context().expanded}</span>
              <span>Focused: {context().focused}</span>
              <span>Disabled: {context().disabled}</span>
            </div>
          {/snippet}
        </Accordion.ItemContext>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>{item} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

Guides

Animate Content Size

Use the --height and/or --width CSS variables to animate the size of the content when it expands or closes:

@keyframes slideDown {
  from {
    opacity: 0.01;
    height: 0;
  }
  to {
    opacity: 1;
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    height: var(--height);
  }
  to {
    opacity: 0.01;
    height: 0;
  }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms ease-in-out;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms ease-in-out;
}

API Reference

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`collapsible`	`false`	`boolean` Whether an accordion item can be closed after it has been expanded.
`defaultValue`		`string[]` The initial value of the expanded accordion items. Use when you don't need to control the value 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 itemContent: (value: string) => string itemTrigger: (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 multiple 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 controlled value of the expanded accordion items.

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

ItemContent

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`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` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

RootProvider

Prop	Default	Type
`value`		`UseAccordionReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Context

These are the properties available when using Accordion.Context, useAccordionContext hook or useAccordion hook.

API

Property	Type
`focusedValue`	`string` The value of the focused accordion item.
`value`	`string[]` The value of the accordion
`setValue`	`(value: string[]) => void` Sets the value of the accordion
`getItemState`	`(props: ItemProps) => ItemState` Returns the state of an accordion item.

Accessibility

This component 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.