---
title: NativeAccordion
description: "`NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the HTML `details` element."
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>
```

## Usage

:::note
`NativeAccordion` uses the HTML `details` and `summary` elements, which provides better performance and accessibility compared to the [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>
```

### Use items

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

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

### Change Variant

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

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

To set a default expanded item, set `open` on `NativeAccordion.Item`.

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

### Expand Multiple Items

To expand multiple items, set `multiple` to `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>
```

### Set Name

To set the native `name` attribute for grouped behavior, set `name` on `NativeAccordion.Root`.

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

### Hide Icon

To hide the icon, set `iconHidden` to `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>
```

### Disable an Item

To disable a specific item, set `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>
```

### Customize Icon

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

### Customize Label

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

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

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

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

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

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

### Customize Panel

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

### Disable Animation

To disable panel animation, set `animate` to `false`.

```tsx
const items = useMemo<NativeAccordion.Item[]>(
  () => [
    { button: "孫悟空少年編", children: "第一話" },
    { button: "ピッコロ大魔王編", children: "第二話" },
    { button: "サイヤ人編", children: "第三話" },
  ],
  [],
)

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

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