---
title: NativeAccordion
description: "`NativeAccordion`は、HTMLの`details`要素を使用して情報を展開または折りたたんで表示するリストのコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/native-accordion/native-accordion.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/native-accordion
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-nativeaccordion--basic
---

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

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

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

## 使い方

:::note
`NativeAccordion`は、HTMLの`details`と`summary`の使用しており、[Accordion](https://yamada-ui.com/components/accordion.md)と比較して、パフォーマンスとアクセシビリティが向上しています。
:::

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

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

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

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

### itemsを使う

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

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

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

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

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

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

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

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

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

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

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

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

複数の項目を展開する場合は、`multiple`を`true`に設定します。

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

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

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

### nameを設定する

グループ挙動で使うネイティブ`name`属性を設定する場合は、`NativeAccordion.Root`に`name`を設定します。

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

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

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

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

アイコンを非表示にする場合は、`iconHidden`を`true`に設定します。

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

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

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

### 項目を無効にする

特定の項目を無効にする場合は、`disabled`を設定します。

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

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

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

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

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

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

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

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

```tsx
<NativeAccordion.Root>
  <NativeAccordion.Item>
    <NativeAccordion.Button _groupOpen={{ color: "fg.muted" }}>
      孫悟空少年編
    </NativeAccordion.Button>

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

  <NativeAccordion.Item>
    <NativeAccordion.Button _groupOpen={{ color: "fg.muted" }}>
      ピッコロ大魔王編
    </NativeAccordion.Button>

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

  <NativeAccordion.Item>
    <NativeAccordion.Button _groupOpen={{ color: "fg.muted" }}>
      サイヤ人編
    </NativeAccordion.Button>

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

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

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

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

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

### アニメーションを無効にする

パネルのアニメーションを無効にする場合は、`animate`を`false`に設定します。

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

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

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

## Props

### NativeAccordion.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.                                |
| `icon`        | -         | `ReactNode`                                                                                                               | The accordion icon for all items to use.                     |
| `iconHidden`  | `false`   | `boolean`                                                                                                                 | If `true`, hide the accordion icon for all items.            |
| `items`       | -         | `NativeAccordionItem[]`                                                                                                   | If provided, generate elements based on items.               |
| `multiple`    | `false`   | `boolean`                                                                                                                 | If `true`, multiple accordion items can be expanded at once. |
| `name`        | -         | `string`                                                                                                                  | The HTML `name` attribute used for forms.                    |

### NativeAccordion.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.                |
| `icon`        | -       | `ReactNode`                                                                                                               | The accordion icon to use.                 |

### NativeAccordion.Icon

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

### NativeAccordion.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.                     |
| `button`      | -       | `ReactNode`                                                                                                               | The accordion button to use.                    |
| `disabled`    | `false` | `boolean`                                                                                                                 | If `true`, the accordion item will be disabled. |
| `icon`        | -       | `ReactNode`                                                                                                               | The accordion icon to use.                      |

### NativeAccordion.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.                |

## 類似のコンポーネント

<Similar name="native-accordion" />

## 使用しているコンポーネント・フック

<Uses name="native-accordion" />

## 使用されているコンポーネント・フック

<UsedBy name="native-accordion" />