---
title: Accordion
description: "`Accordion`は、情報を展開または折りたたんで表示するリストのコンポーネントです。"
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>
```

## 使い方

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

### itemsを使う

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

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

### バリアントを変更する

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

### 特定の項目を展開済みにする

最初から特定の項目を展開済みにする場合は、`defaultIndex`に項目の`index`を設定します。

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

### 複数の項目を展開する

複数の項目を展開する場合は、`multiple`を`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>
```

### 項目の展開・折りたたみを可能にする

項目の展開・折りたたみを可能にする場合は、`toggle`を`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>
```

### アイコンを非表示にする

アイコンを非表示にする場合は、`iconHidden`を`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>
```

### 項目を無効にする

項目を無効にする場合は、`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>
```

### アイコンをカスタマイズする

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

項目の展開と折りたたみの状態によって、アイコンを切り替える場合は、`icon`から提供される`expanded`で制御します。

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

### ラベルをカスタマイズする

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

### パネルをカスタマイズする

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

### 制御する

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

## アクセシビリティ

`Accordion`は、アクセシビリティに関して[WAI-ARIA - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)に従います。

### キーボード操作

| キー             | 説明                                                                                                                         | 状態                               |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `Tab`            | フォーカスがアコーディオンに移動すると最初の項目をフォーカスします。アコーディオン内である場合は次の項目をフォーカスします。 | -                                  |
| `Shift` + `Tab`  | 無効ではない前の項目をフォーカスします。                                                                                     | -                                  |
| `ArrowUp`        | 無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。                         | -                                  |
| `ArrowDown`      | 無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。                         | -                                  |
| `Space`, `Enter` | フォーカスしている項目のパネルを展開します。                                                                                 | -                                  |
|                  | フォーカスしている項目のパネルを展開し、展開されている場合は折りたたみます。                                                 | `multiple={true}`, `toggle={true}` |
| `Home`           | 無効ではない最初の項目をフォーカスします。                                                                                   | -                                  |
| `End`            | 無効ではない最後の項目をフォーカスします。                                                                                   | -                                  |

### ARIAロールと属性

| コンポーネント     | ロールと属性           | 使い方                                                                                                                                                                                                                               |
| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Accordion.Button` | `aria-disabled="true"` | 項目のパネルが展開されている場合は`"true"`を設定します。但し、`Accordion.Root`に`multiple={true}`または`toggle={true}`が設定されており、`Accordion.Item`が無効ではない場合は、折りたたみが可能なため`"true"`になることはありません。 |
|                    | `id`                   | `Accordion.Panel`と関連付けるために使用する`id`。                                                                                                                                                                                    |
|                    | `aria-controls`        | 関連した`Accordion.Panel`の`id`を設定します。                                                                                                                                                                                        |
|                    | `aria-expanded`        | 項目のパネルが展開されている場合は`"true"`を設定し、折りたたまれている場合は`"false"`を設定します。                                                                                                                                  |
| `Accordion.Panel`  | `role="region"`        | ランドマーク領域であることを示します。                                                                                                                                                                                               |
|                    | `id`                   | `Accordion.Button`と関連付けるために使用する`id`。                                                                                                                                                                                   |
|                    | `aria-labelledby`      | 関連した`Accordion.Button`の`id`を設定します。                                                                                                                                                                                       |