---
title: "Accordion"
description: "Groups secondary content into sections that open and close. It can keep a single section open or several at once."
kind: component
id: C-030
registry: "accordion"
docs: "https://koten.codehive.com.co/components/accordion"
markdown: "https://koten.codehive.com.co/md/components/accordion.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/accordion.json"
language: en
---

# Accordion · アコーディオン

> Component C-030 in the Koten UI catalog.

Groups secondary content into sections that open and close. It can keep a single section open or several at once.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/accordion.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/accordion.json
```

## Files

- `@/components/ui/accordion.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/accordion

## Examples

### One section at a time

defaultValue opens shipping; opening another section closes the previous one.

```tsx
<Accordion
  defaultValue="shipping"
  items={[
    { value: "shipping", title: "Shipping and delivery", content: "Ships from Tokyo within 24 hours." },
    { value: "returns", title: "Returns", content: "Returns within 30 days." },
    { value: "warranty", title: "Warranty", content: "24-month coverage." },
  ]}
/>
```

### Several sections

multiple keeps shipping and returns open at the same time.

```tsx
<Accordion
  multiple
  defaultValue={["shipping", "returns"]}
  items={[
    { value: "shipping", title: "Shipping and delivery", content: "Ships from Tokyo within 24 hours." },
    { value: "returns", title: "Returns", content: "Returns within 30 days." },
    { value: "warranty", title: "Warranty", content: "24-month coverage." },
  ]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | `AccordionItem[]` | `—` | Each item defines value, title, content and an optional disabled. |
| `defaultValue` | `string \| string[]` | `—` | Section or sections open on mount. |
| `value` | `string \| string[]` | `—` | Controlled value; use an array when multiple is enabled. |
| `onValueChange` | `(value: string \| string[]) => void` | `—` | Returns string or string[] depending on multiple. |
| `multiple` | `boolean` | `false` | Allows several sections to be open at once. |
| `className` | `string` | `—` | Applied to the container; borders separate the sections. |

## Accessibility

- Each trigger is a button inside a header and exposes aria-expanded and aria-controls.
- Focus stays on the trigger after opening or closing.
- The chevron rotates and the title changes color, so the state does not rely on a single cue.
- The closed panel is hidden from screen readers; the trigger communicates the state.

## Sources

- Catalog page: https://koten.codehive.com.co/components/accordion
- Markdown: https://koten.codehive.com.co/md/components/accordion.md
- Repository: https://github.com/codehive-colombia/koten