# Fumadocs UI (the default theme of Fumadocs): アコーディオン
URL: /ja/docs/ui/components/accordion
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/accordion.ja.mdx

ドキュメントにアコーディオンを追加します

Install to your codebase:

```bash
npx @fumadocs/cli@latest add accordion
```

## 使い方 [#usage]

[Base UI Accordion](https://base-ui.com/react/components/accordion) をベースにしており、FAQ セクションなどに適しています。

> Radix UI 版のパッケージでは、[Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion) がベースになっています。

MDX ファイル内でも、通常の React コンポーネントとしても使用できます。

```mdx tab="MDX"
---
title: Hello World
---

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="single">
  <Accordion title="My Title">My Content</Accordion>
</Accordions>
```

```tsx tab="React.js"
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

export default function Page() {
  return (
    <Accordions type="single">
      <Accordion title="My Title">My Content</Accordion>
    </Accordions>
  );
}
```

### Accordions [#accordions]

### AccordionsProps

| Prop                | Type                                                                                                                                                 | Description                                                                                                                                                                                                              |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `render?`           | `ComponentRenderFn<HTMLProps, AccordionRoot.State<unknown>> \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.                                |
| `disabled?`         | `boolean \| undefined`                                                                                                                               | Whether the component should ignore user interaction. Default: `false`                                                                                                                                                   |
| `hiddenUntilFound?` | `boolean \| undefined`                                                                                                                               | Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM. Default: `false` |
| `keepMounted?`      | `boolean \| undefined`                                                                                                                               | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. Default: `false`                                                                                 |
| `loopFocus?`        | `boolean \| undefined`                                                                                                                               | **Deprecated.** Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior.                             |
| `multiple?`         | `boolean \| undefined`                                                                                                                               | Whether multiple items can be open at the same time. Default: `false`                                                                                                                                                    |
| `orientation?`      | `Orientation \| undefined`                                                                                                                           | **Deprecated.** Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. Default: `'vertical'`       |

### Accordion [#accordion]

### AccordionProps

| Prop            | Type                                                                                                                                       | Description                                                                                                                                                                               |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `render?`       | `ComponentRenderFn<HTMLProps, AccordionItemState> \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| `disabled?`     | `boolean \| undefined`                                                                                                                     | Whether the component should ignore user interaction. Default: `false`                                                                                                                    |
| `onOpenChange?` | `((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void) \| undefined`                                                   | Event handler called when the panel is opened or closed.                                                                                                                                  |
| `value?`        | `string \| undefined`                                                                                                                      |                                                                                                                                                                                           |

### アコーディオンへのリンク [#linking-to-accordion]

アコーディオンには `id` を指定できます。URL のハッシュに指定した `id` を含めてユーザーがページにアクセスすると、そのアコーディオンが自動的に開きます。

```mdx
<Accordions>
<Accordion title="My Title" id="my-title">

My Content

</Accordion>
</Accordions>
```

> アコーディオンの値は、デフォルトではタイトルと同じです。id が指定されている場合は、代わりに id が値として使用されます。