# Fumadocs UI (the default theme of Fumadocs): 手風琴
URL: /zh-TW/docs/ui/components/accordion
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/accordion.zh-TW.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]

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

### 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`。當使用者前往該頁面，且網址 hash 參數帶有指定的 `id` 時，手風琴會自動展開。

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

My Content

</Accordion>
</Accordions>
```

> 手風琴的值預設與標題相同。若有指定 id，則會改以 id 作為值。