# Accordion

URL: https://ark-ui.com/docs/components/accordion
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/accordion.mdx

A collapsible component for displaying content in a vertical stack.

---

<ComponentPreview id="Accordion" />

## Anatomy

<Anatomy id="accordion" />

```tsx
<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>
```

## Examples

### Default Value

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

**Example: basic**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

export const Basic = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']}>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Basic = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']">
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Controlled

Use the `value` and `onValueChange` props to control the expanded items.

**Example: controlled**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/accordion.module.css'

export const Controlled = () => {
  const [value, setValue] = useState<string[]>([])

  return (
    <Accordion.Root className={styles.Root} value={value} onValueChange={(details) => setValue(details.value)}>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal<string[]>([])

  return (
    <Accordion.Root class={styles.Root} value={value()} onValueChange={(details) => setValue(details.value)}>
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const value = ref<string[]>([])

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" v-model="value">
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  let value = $state<string[]>([])

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} bind:value>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Root Provider

An alternative way to control the accordion is to use the `RootProvider` component and the `useAccordion` hook. This way
you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Accordion, useAccordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

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

  return (
    <div className="stack">
      <output>Value: {JSON.stringify(accordion.value)}</output>

      <Accordion.RootProvider className={styles.Root} value={accordion}>
        {items.map((item) => (
          <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
            <Accordion.ItemTrigger className={styles.ItemTrigger}>
              {item.title}
              <Accordion.ItemIndicator className={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent className={styles.ItemContent}>
              <div className={styles.ItemBody}>{item.content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        ))}
      </Accordion.RootProvider>
    </div>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion, useAccordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

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

  return (
    <div class="stack">
      <output>Value: {JSON.stringify(accordion().value)}</output>

      <Accordion.RootProvider class={styles.Root} value={accordion}>
        <Index each={items}>
          {(item) => (
            <Accordion.Item class={styles.Item} value={item().value}>
              <Accordion.ItemTrigger class={styles.ItemTrigger}>
                {item().title}
                <Accordion.ItemIndicator class={styles.ItemIndicator}>
                  <ChevronDownIcon />
                </Accordion.ItemIndicator>
              </Accordion.ItemTrigger>
              <Accordion.ItemContent class={styles.ItemContent}>
                <div class={styles.ItemBody}>{item().content}</div>
              </Accordion.ItemContent>
            </Accordion.Item>
          )}
        </Index>
      </Accordion.RootProvider>
    </div>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

```vue
<script setup lang="ts">
import { Accordion, useAccordion } from '@ark-ui/vue/accordion'
import { ChevronDownIcon } from 'lucide-vue-next'
import styles from 'styles/accordion.module.css'

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

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

<template>
  <div class="stack">
    <output>Value: {{ JSON.stringify(accordion.value) }}</output>

    <Accordion.RootProvider :class="styles.Root" :value="accordion">
      <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
        <Accordion.ItemTrigger :class="styles.ItemTrigger">
          {{ item.title }}
          <Accordion.ItemIndicator :class="styles.ItemIndicator">
            <ChevronDownIcon />
          </Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent :class="styles.ItemContent">
          <div :class="styles.ItemBody">{{ item.content }}</div>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Accordion, useAccordion } from '@ark-ui/svelte/accordion'
  import { ChevronDownIcon } from 'lucide-svelte'
  import styles from 'styles/accordion.module.css'

  const id = $props.id()
  const accordion = useAccordion({
    id,
    defaultValue: ['ark-ui'],
  })

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<div class="stack">
  <output>Value: {JSON.stringify(accordion().value)}</output>
  <Accordion.RootProvider class={styles.Root} value={accordion}>
    {#each items as item (item.value)}
      <Accordion.Item class={styles.Item} value={item.value}>
        <Accordion.ItemTrigger class={styles.ItemTrigger}>
          {item.title}
          <Accordion.ItemIndicator class={styles.ItemIndicator}>
            <ChevronDownIcon />
          </Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent class={styles.ItemContent}>
          <div class={styles.ItemBody}>{item.content}</div>
        </Accordion.ItemContent>
      </Accordion.Item>
    {/each}
  </Accordion.RootProvider>
</div>

```

### Collapsible

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

**Example: collapsible**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

export const Collapsible = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']} collapsible>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Collapsible = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']} collapsible>
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']" collapsible>
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']} collapsible>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Multiple

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

**Example: multiple**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

export const Multiple = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']} multiple>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Multiple = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']} multiple>
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']" multiple>
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']} multiple>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Horizontal

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

**Example: horizontal**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import styles from 'styles/accordion.module.css'

export const Horizontal = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']} orientation="horizontal">
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>{item.title}</Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={`${styles.ItemBody} ${styles.Centered}`}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Horizontal = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']} orientation="horizontal">
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>{item().title}</Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={`${styles.ItemBody} ${styles.Centered}`}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

```vue
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import styles from 'styles/accordion.module.css'

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']" orientation="horizontal">
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">{{ item.title }}</Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="[styles.ItemBody, styles.Centered]">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Accordion } from '@ark-ui/svelte/accordion'
  import styles from 'styles/accordion.module.css'

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']} orientation="horizontal">
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>{item.title}</Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={`${styles.ItemBody} ${styles.Centered}`}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Lazy Mount

Use the `lazyMount` prop to defer rendering of accordion content until the item is expanded. Combine with
`unmountOnExit` to unmount content when collapsed, freeing up resources.

**Example: lazy-mount**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

export const LazyMount = () => {
  return (
    <Accordion.Root className={styles.Root} lazyMount unmountOnExit>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} lazyMount unmountOnExit>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Context

Use `Accordion.Context` or `useAccordionContext` to access the accordion state.

**Example: context**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/accordion.module.css'

export const Context = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']}>
      <Accordion.Context>
        {(context) => (
          <output>
            <div>context.value: {JSON.stringify(context.value)}</div>
            <div>context.focusedValue: {context.focusedValue || 'null'}</div>
          </output>
        )}
      </Accordion.Context>

      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemIndicator className={styles.ItemIndicator}>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const Context = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
      <Accordion.Context>
        {(context) => (
          <output>
            <div>context.value: {JSON.stringify(context().value)}</div>
            <div>context.focusedValue: {context().focusedValue || 'null'}</div>
          </output>
        )}
      </Accordion.Context>

      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']">
    <Accordion.Context v-slot="context">
      <output>
        <div>context.value: {{ JSON.stringify(context.value) }}</div>
        <div>context.focusedValue: {{ context.focusedValue || 'null' }}</div>
      </output>
    </Accordion.Context>

    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
  <Accordion.Context>
    {#snippet render(context)}
      <output>
        <div>context.value: {JSON.stringify(context().value)}</div>
        <div>context.focusedValue: {context().focusedValue || 'null'}</div>
      </output>
    {/snippet}
  </Accordion.Context>

  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

### Item State

Use `Accordion.ItemContext` or `useAccordionItemContext` to access the state of an accordion item.

**Example: item-context**

#### React

```tsx
import { Accordion } from '@ark-ui/react/accordion'
import styles from 'styles/accordion.module.css'

export const ItemContext = () => {
  return (
    <Accordion.Root className={styles.Root} defaultValue={['ark-ui']}>
      {items.map((item) => (
        <Accordion.Item className={styles.Item} key={item.value} value={item.value}>
          <Accordion.ItemTrigger className={styles.ItemTrigger}>
            {item.title}
            <Accordion.ItemContext>
              {(context) => (
                <code style={{ display: 'inline-flex', gap: '0.5rem', fontSize: '0.75rem' }}>
                  {context.expanded && <span>Expanded</span>}
                  {context.focused && <span>Focused</span>}
                </code>
              )}
            </Accordion.ItemContext>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent className={styles.ItemContent}>
            <div className={styles.ItemBody}>{item.content}</div>
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Solid

```tsx
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/accordion.module.css'

export const ItemContext = () => {
  return (
    <Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
      <Index each={items}>
        {(item) => (
          <Accordion.Item class={styles.Item} value={item().value}>
            <Accordion.ItemTrigger class={styles.ItemTrigger}>
              {item().title}
              <Accordion.ItemIndicator class={styles.ItemIndicator}>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
              <Accordion.ItemContext>
                {(context) => (
                  <div style={{ display: 'inline-flex', gap: '0.5rem', 'font-size': '0.75rem' }}>
                    <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 class={styles.ItemContent}>
              <div class={styles.ItemBody}>{item().content}</div>
            </Accordion.ItemContent>
          </Accordion.Item>
        )}
      </Index>
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]

```

#### Vue

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

const items = [
  {
    value: 'ark-ui',
    title: 'What is Ark UI?',
    content: 'A headless component library for building accessible web apps.',
  },
  {
    value: 'getting-started',
    title: 'How to get started?',
    content: 'Install the package and import the components you need.',
  },
  {
    value: 'maintainers',
    title: 'Who maintains this project?',
    content: 'Ark UI is maintained by the Chakra UI team.',
  },
]
</script>

<template>
  <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']">
    <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
      <Accordion.ItemTrigger :class="styles.ItemTrigger">
        {{ item.title }}
        <Accordion.ItemIndicator :class="styles.ItemIndicator">
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
        <Accordion.ItemContext v-slot="context">
          <div style="display: inline-flex; gap: 0.5rem; font-size: 0.75rem">
            <span>Expanded: {{ context.expanded }}</span>
            <span>Focused: {{ context.focused }}</span>
            <span>Disabled: {{ context.disabled }}</span>
          </div>
        </Accordion.ItemContext>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent :class="styles.ItemContent">
        <div :class="styles.ItemBody">{{ item.content }}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

```

#### Svelte

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

  const items = [
    {
      value: 'ark-ui',
      title: 'What is Ark UI?',
      content: 'A headless component library for building accessible web apps.',
    },
    {
      value: 'getting-started',
      title: 'How to get started?',
      content: 'Install the package and import the components you need.',
    },
    {
      value: 'maintainers',
      title: 'Who maintains this project?',
      content: 'Ark UI is maintained by the Chakra UI team.',
    },
  ]
</script>

<Accordion.Root class={styles.Root} defaultValue={['ark-ui']}>
  {#each items as item (item.value)}
    <Accordion.Item class={styles.Item} value={item.value}>
      <Accordion.ItemTrigger class={styles.ItemTrigger}>
        {item.title}
        <Accordion.ItemIndicator class={styles.ItemIndicator}>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
        <Accordion.ItemContext>
          {#snippet render(context)}
            <div style="display: inline-flex; gap: 0.5rem; font-size: 0.75rem;">
              <span>Expanded: {context().expanded}</span>
              <span>Focused: {context().focused}</span>
              <span>Disabled: {context().disabled}</span>
            </div>
          {/snippet}
        </Accordion.ItemContext>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent class={styles.ItemContent}>
        <div class={styles.ItemBody}>{item.content}</div>
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

```

## Guides

### Content Animation

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

```css
@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

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

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


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

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


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item(value: string): string
  itemContent(value: string): string
  itemTrigger(value: string): string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `modelValue` | `string[]` | No | The v-model value of the accordion |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Root Data Attributes:**

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


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `AccordionApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `ref` | `Element` | No |  |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

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


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseAccordionContext]>` | Yes |  |


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemContent Data Attributes:**

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


**ItemContext Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseAccordionItemContext]>` | Yes |  |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemIndicator Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |
| `ref` | `Element` | No |  |


**Item Data Attributes:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemTrigger Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `ref` | `Element` | No |  |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `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](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

### Keyboard Support

<KeyBindingsTable id="accordion" />