---
title: Accordion
description: "`Accordion` is a component for a list that displays information in an expandable or collapsible manner."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/accordion/accordion.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/accordion
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-accordion--basic
---

```tsx
<Accordion.Root>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

## Usage

```tsx
import { Accordion } from "@yamada-ui/react"
```

```tsx
import { Accordion } from "@/components/ui"
```

```tsx
import { Accordion } from "@workspaces/ui"
```

```tsx
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Button />
    <Accordion.Panel />
  </Accordion.Item>
</Accordion.Root>
```

### Use items

```tsx
const items = useMemo<Accordion.Item[]>(
  () => [
    {
      button: "孫悟空少年編",
      children:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。",
    },
    {
      button: "ピッコロ大魔王編",
      children:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。",
    },
    {
      button: "サイヤ人編",
      children:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。",
    },
  ],
  [],
)

return <Accordion.Root items={items} />
```

### Change Variant

```tsx
<VStack>
  <For each={["plain", "panel"]}>
    {(variant, index) => (
      <Accordion.Root variant={variant} key={index}>
        <Accordion.Item button="孫悟空少年編" index={0}>
          地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
        </Accordion.Item>

        <Accordion.Item button="ピッコロ大魔王編" index={1}>
          天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
        </Accordion.Item>

        <Accordion.Item button="サイヤ人編" index={2}>
          ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
        </Accordion.Item>
      </Accordion.Root>
    )}
  </For>
</VStack>
```

### Set a Specific Item to be Expanded by Default

To have a specific item expanded by default, set the item's `index` to `defaultIndex`.

```tsx
<Accordion.Root defaultIndex={1}>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Expand Multiple Items

To expand multiple items, set `multiple` to `true`.

```tsx
<Accordion.Root defaultIndex={[1, 2]} multiple>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Enable Toggling

To enable toggling, set `toggle` to `true`.

```tsx
<Accordion.Root toggle>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Hide Icon

To hide the icon, set `iconHidden` to `true`.

```tsx
<Accordion.Root iconHidden>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Disable an Item

To disable a specific item, set `disabled`.

```tsx
<Accordion.Root>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" disabled index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Customize Icon

```tsx
<Accordion.Root icon={<GhostIcon />}>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

If you want to switch icons based on the expansion and collapse state of an item, control it with `expanded` provided by `icon`.

```tsx
<Accordion.Root
  icon={({ expanded }) => (!expanded ? <PlusIcon /> : <MinusIcon />)}
>
  <Accordion.Item button="孫悟空少年編" index={0}>
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
  </Accordion.Item>
</Accordion.Root>
```

### Customize Label

```tsx
<Accordion.Root>
  <Accordion.Item index={0}>
    <Accordion.Button _expanded={{ bg: "bg.panel" }}>
      孫悟空少年編
    </Accordion.Button>

    <Accordion.Panel pt={3}>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item index={1}>
    <Accordion.Button _expanded={{ bg: "bg.panel" }}>
      ピッコロ大魔王編
    </Accordion.Button>

    <Accordion.Panel pt={3}>
      天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item index={2}>
    <Accordion.Button _expanded={{ bg: "bg.panel" }}>
      サイヤ人編
    </Accordion.Button>

    <Accordion.Panel pt={3}>
      ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
```

### Customize Panel

```tsx
<Accordion.Root>
  <Accordion.Item button="孫悟空少年編" index={0}>
    <Accordion.Panel bg="bg.panel" pt={3}>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item button="ピッコロ大魔王編" index={1}>
    <Accordion.Panel bg="bg.panel" pt={3}>
      天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item button="サイヤ人編" index={2}>
    <Accordion.Panel bg="bg.panel" pt={3}>
      ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
```

### Control

```tsx
const [index, onChange] = useState<Accordion.RootProps["index"] | undefined>(
  undefined,
)

return (
  <Accordion.Root index={index} onChange={onChange}>
    <Accordion.Item button="孫悟空少年編" index={0}>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Accordion.Item>

    <Accordion.Item button="ピッコロ大魔王編" index={1}>
      天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
    </Accordion.Item>

    <Accordion.Item button="サイヤ人編" index={2}>
      ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
    </Accordion.Item>
  </Accordion.Root>
)
```

## Props

### Accordion.Root

| Prop           | Default   | Type                                                                                                                      | Description                                                          |
| -------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| `as`           | -         | `As`                                                                                                                      | The HTML element to render.                                          |
| `asChild`      | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child.                           |
| `css`          | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                      |
| `colorScheme`  | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                          |
| `variant`      | `"plain"` | `"panel" \| "plain"`                                                                                                      | The variant of the component.                                        |
| `defaultIndex` | -         | `number \| number[]`                                                                                                      | The initial index(es) of the accordion item to expand.               |
| `icon`         | -         | `ReactNodeOrFunction<AccordionCallBackProps>`                                                                             | The accordion icon for all items to use.                             |
| `iconHidden`   | `false`   | `boolean`                                                                                                                 | If `true`, hide the accordion icon for all items.                    |
| `index`        | -         | `number \| number[]`                                                                                                      | The index(es) of the accordion item to expand.                       |
| `items`        | -         | `Omit<AccordionItemProps, "index">[]`                                                                                     | If provided, generate elements based on items.                       |
| `multiple`     | `false`   | `boolean`                                                                                                                 | If `true`, multiple accordion items can be expanded at once.         |
| `onChange`     | -         | `(index: number \| number[]) => void`                                                                                     | The callback invoked when accordion items are expanded or collapsed. |
| `toggle`       | `false`   | `boolean`                                                                                                                 | If `true`, any expanded accordion item can be collapsed again.       |

### Accordion.Button

| Prop             | Default | Type                                                                                                                      | Description                                |
| ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `containerProps` | -       | `HTMLStyledProps`                                                                                                         | Props the container element.               |
| `icon`           | -       | `ReactNodeOrFunction<{ disabled?: boolean; expanded?: boolean }>`                                                         | The accordion icon to use.                 |

### Accordion.Item

| Prop          | Default | Type                                                                                                                      | Description                                     |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                     |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.      |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                 |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                     |
| `index`       | -       | `number`                                                                                                                  | The index of the accordion item.                |
| `button`      | -       | `ReactNodeOrFunction<AccordionCallBackProps>`                                                                             | The accordion button to use.                    |
| `children`    | -       | `ReactNodeOrFunction<AccordionCallBackProps>`                                                                             | The accordion children to use.                  |
| `disabled`    | `false` | `boolean`                                                                                                                 | If `true`, the accordion item will be disabled. |
| `icon`        | -       | `ReactNodeOrFunction<AccordionCallBackProps>`                                                                             | The accordion icon to use.                      |

### Accordion.Panel

| Prop               | Default  | Type                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as`               | -        | `As`                                                                                                                      | The HTML element to render.                                                                                                                                                                                                                                                                                                                                                                                  |
| `asChild`          | -        | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                                                                                                                                                                                                                                                                                                                                                   |
| `css`              | -        | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                                                                                                                                                                                                                                                                                                                                                              |
| `colorScheme`      | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                                                                                                                                                                                                                                                                                                                                                  |
| `enter`            | -        | `any`                                                                                                                     | Custom `enter`.                                                                                                                                                                                                                                                                                                                                                                                              |
| `exit`             | -        | `any`                                                                                                                     | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial`          | -        | `any`                                                                                                                     | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)                                                                                                                                                                                                                                |
| `animationOpacity` | `true`   | `boolean`                                                                                                                 | If `true`, the opacity of the content will be animated.                                                                                                                                                                                                                                                                                                                                                      |
| `delay`            | `0`      | `number \| MotionLifecycleProps<number>`                                                                                  | Custom `delay` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                            |
| `duration`         | `0.2`    | `number \| MotionLifecycleProps<number>`                                                                                  | Custom `duration` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                         |
| `endingHeight`     | `"auto"` | `string \| number`                                                                                                        | The height you want the content in its expanded state.                                                                                                                                                                                                                                                                                                                                                       |
| `open`             | -        | `boolean`                                                                                                                 | Show the component. triggers when enter or exit states.                                                                                                                                                                                                                                                                                                                                                      |
| `startingHeight`   | `0`      | `string \| number`                                                                                                        | The height you want the content in its collapsed state.                                                                                                                                                                                                                                                                                                                                                      |
| `transition`       | -        | `MotionLifecycleProps<Transition>`                                                                                        | Custom `transition` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                       |
| `transitionEnd`    | -        | `MotionLifecycleProps<ResolvedValues>`                                                                                    | Custom `transitionEnd` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                    |
| `unmountOnExit`    | -        | `boolean`                                                                                                                 | If `true`, the element will unmount when `open={false}` and animation is done.                                                                                                                                                                                                                                                                                                                               |

## Accessibility

`Accordion` follows the [WAI-ARIA - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) for accessibility.

### Keyboard Navigation

| Key              | Description                                                                                                         | State                              |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `Tab`            | Focuses the first item when focus moves to the accordion. Focuses the next item if already within the accordion.    | -                                  |
| `Shift` + `Tab`  | Focuses the previous item that is not disabled.                                                                     | -                                  |
| `ArrowUp`        | Focuses the previous item that is not disabled. If it's the first item, focuses the last item that is not disabled. | -                                  |
| `ArrowDown`      | Focuses the next item that is not disabled. If it's the last item, focuses the first item that is not disabled.     | -                                  |
| `Space`, `Enter` | Expands the panel of the focused item.                                                                              | -                                  |
|                  | Expands the panel of the focused item and collapses it if it is already expanded.                                   | `multiple={true}`, `toggle={true}` |
| `Home`           | Focuses the first item that is not disabled.                                                                        | -                                  |
| `End`            | Focuses the last item that is not disabled.                                                                         | -                                  |

### ARIA Roles and Attributes

| Component          | Role and Attributes    | Usage                                                                                                                                                                                                                            |
| ------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Accordion.Button` | `aria-disabled="true"` | Sets to `"true"` when the panel of the item is expanded. However, if `Accordion.Root` is set with `multiple={true}` or `toggle={true}` and `Accordion.Item` is not disabled, it does not become `"true"` as it can be collapsed. |
|                    | `id`                   | Used to associate with `Accordion.Panel`.                                                                                                                                                                                        |
|                    | `aria-controls`        | Sets the `id` of the associated `Accordion.Panel`.                                                                                                                                                                               |
|                    | `aria-expanded`        | Sets to `"true"` when the panel of the item is expanded, and `"false"` when it is collapsed.                                                                                                                                     |
| `Accordion.Panel`  | `role="region"`        | Indicates that it is a landmark region.                                                                                                                                                                                          |
|                    | `id`                   | Used to associate with `Accordion.Button`.                                                                                                                                                                                       |
|                    | `aria-labelledby`      | Sets the `id` of the associated `Accordion.Button`.                                                                                                                                                                              |