Accordion

Accordionは、コンテンツを折りたたみ式のパネルに分割して表示するコンポーネントです。3つのバリアントと3つのサイズで、FAQやヘルプセクションなどさまざまな用途に対応します。

Variants

Sizes

Expand Mode

Radix

Base

Playground

Preview

A design system is a collection of reusable components and guidelines for building consistent user interfaces.

Variant

Size

Type

Options

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is a design system?</Accordion.Trigger>
    <Accordion.Content>A design system is a collection of reusable components and guidelines for building consistent user interfaces.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>How to install?</Accordion.Trigger>
    <Accordion.Content>Install the package using npm or yarn, then import components as needed.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes, all components follow WAI-ARIA guidelines with full keyboard navigation support.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Variants

default

Content for item 1

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

bordered

Content for item 1

<Accordion variant="bordered" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

splitted

Content for item 1

<Accordion variant="splitted" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

Sizes

sm

パディング12px 16px

フォント13px

default

パディング16px 16px

フォント14px

lg

パディング20px 24px

フォント16px

Size	パディング (トリガー)	フォント	プレビュー
`sm`	12px 16px	13px (text-sm)	Content A
`default`	16px 16px	14px (text-md)	Content A
`lg`	20px 24px	16px (text-base)	Content A

Features

Expand Mode

singleは1つだけ展開、multipleは複数同時に展開できます。

Single (default)

Only one open at a time

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Single 1</Accordion.Trigger>
    <Accordion.Content>Only one open at a time</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Single 2</Accordion.Trigger>
    <Accordion.Content>Previous item closes automatically</Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple

Multiple items can be open

All items open independently

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Multiple 1</Accordion.Trigger>
    <Accordion.Content>Multiple items can be open</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Multiple 2</Accordion.Trigger>
    <Accordion.Content>All items open independently</Accordion.Content>
  </Accordion.Item>
</Accordion>

Collapsible

collapsibleがtrue（デフォルト）の場合、開いているアイテムをクリックして閉じることができます。falseにすると、常に1つのアイテムが展開された状態を維持します。

This accordion always keeps one item open.

<Accordion collapsible={false} defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Always one open</Accordion.Trigger>
    <Accordion.Content>This accordion always keeps one item open.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Try closing me</Accordion.Trigger>
    <Accordion.Content>You cannot close all items.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Icon Position

Right (default)

Icon on the right side

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Right icon (default)</Accordion.Trigger>
    <Accordion.Content>Icon on the right side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Left

Icon on the left side

<Accordion iconPosition="left" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Left icon</Accordion.Trigger>
    <Accordion.Content>Icon on the left side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Disabled

This item is active

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is active</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2" disabled>
    <Accordion.Trigger>Disabled item</Accordion.Trigger>
    <Accordion.Content>This item is disabled</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is also active</Accordion.Content>
  </Accordion.Item>
</Accordion>

API

Component Structure

Accordion— Radix Accordion

.ItemProps.TriggerProps.Content

.ItemPropsアコーディオンアイテム

.TriggerPropsトリガー（icon prop対応）

.Contentコンテンツ領域（アニメーション付き）

Props

Accordion (Root)

type"single"

"single" | "multiple"

展開モード（singleは1つだけ、multipleは複数同時）

collapsibletrue

boolean

すべてのアイテムを閉じることを許可（single モード）

variant"default"

"default" | "bordered" | "splitted"

ビジュアルスタイル

size"default"

"sm" | "default" | "lg"

トリガーとコンテンツのサイズ

iconPosition"right"

"left" | "right"

インジケーターアイコンの位置

defaultValueundefined

string | string[]

デフォルトで展開するアイテム（非制御モード）

valueundefined

string | string[]

展開中のアイテム（制御モード）

onValueChangeundefined

(value: string | string[]) => void

展開状態変更時のコールバック

disabledundefined

boolean

全アイテムを無効化

Name	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	展開モード（singleは1つだけ、multipleは複数同時）
`collapsible`	`boolean`	`true`	すべてのアイテムを閉じることを許可（single モード）
`variant`	`"default" \| "bordered" \| "splitted"`	`"default"`	ビジュアルスタイル
`size`	`"sm" \| "default" \| "lg"`	`"default"`	トリガーとコンテンツのサイズ
`iconPosition`	`"left" \| "right"`	`"right"`	インジケーターアイコンの位置
`defaultValue`	`string \| string[]`	`undefined`	デフォルトで展開するアイテム（非制御モード）
`value`	`string \| string[]`	`undefined`	展開中のアイテム（制御モード）
`onValueChange`	`(value: string \| string[]) => void`	`undefined`	展開状態変更時のコールバック
`disabled`	`boolean`	`undefined`	全アイテムを無効化

Accordion.Item

value—

string

アイテムの一意な識別値（必須）

disabledundefined

boolean

このアイテムを無効化

Name	Type	Default	Description
`value`	`string`	`—`	アイテムの一意な識別値（必須）
`disabled`	`boolean`	`undefined`	このアイテムを無効化

Accordion.Trigger

iconbuilt-in SVG (ChevronDown)

ReactNode

カスタムインジケーターアイコン

Name	Type	Default	Description
`icon`	`ReactNode`	`built-in SVG (ChevronDown)`	カスタムインジケーターアイコン

Customization

Accordion.Triggerのicon propでインジケーターアイコンを自由にカスタマイズできます。

Plus / Minus アイコン

You can return any item within 30 days of purchase.

import { Plus, Minus } from 'lucide-react'

<Accordion.Trigger
  icon={
    <>
      <Plus className="icon-sm shrink-0 text-text-muted
        group-data-[state=open]:hidden" />
      <Minus className="icon-sm shrink-0 text-text-muted
        hidden group-data-[state=open]:block" />
    </>
  }
>
  Question text
</Accordion.Trigger>

ChevronRight（90°回転）

Follow the installation guide to begin.

import { ChevronRight } from 'lucide-react'

<Accordion.Trigger
  icon={
    <ChevronRight className="icon-sm shrink-0 text-text-muted
      transition-transform duration-normal accordion-chevron" />
  }
>
  Item text
</Accordion.Trigger>

Tip: カスタムアイコンにaccordion-chevronクラスを追加すると、内蔵アイコンと同じ180°回転アニメーションが適用されます。

Anatomy

Frequently asked questions

Pricing plans

Trigger padding16px

Content padding0 16px 16px

Iconicon-sm

Root

ルートコンテナ

Item

折りたたみセクション

Trigger

ヘッダーボタン

Chevron

開閉アイコン

Content

展開コンテンツ

Best Practices

✓

推奨

✓FAQやヘルプセクションに使用する
✓関連するコンテンツをグループ化する
✓最も重要な項目をデフォルトで展開する
✓ラベルは簡潔で内容を予測できるものにする

避けるべき

✗アコーディオン内に別のアコーディオンをネストしない
✗必ず表示すべき重要な情報を隠さない
✗項目数を多くしすぎない（7個以下推奨）
✗短いコンテンツに不要な折りたたみを使用しない

Accessibility

キーボード操作

Enter / Spaceフォーカス中のアイテムを開閉

Tab次のフォーカス可能な要素へ移動

Arrow Down次のトリガーにフォーカス移動

Arrow Up前のトリガーにフォーカス移動

Home最初のトリガーにフォーカス移動

End最後のトリガーにフォーカス移動

ARIA / WCAG

role="region" コンテンツに aria-labelledby 付与
aria-expanded トリガーの展開状態を自動表示
aria-controls トリガーとコンテンツをリンク
disabled アイテムはキーボードナビゲーションでスキップ

Accordion

Playground

What is a design system?

How to install?

Is it accessible?

Variants

default

Item 1

Item 2

Item 3

bordered

Item 1

Item 2

Item 3

splitted

Item 1

Item 2

Item 3

Sizes

Item A

Item B

Item A

Item B

Item A

Item B

Features

Expand Mode

Single 1

Single 2

Multiple 1

Multiple 2

Collapsible

Always one open

Try closing me

Icon Position

Right icon (default)

Left icon

Disabled

Active item

Disabled item

Active item

API

Component Structure

Props

Accordion (Root)

Accordion.Item

Accordion.Trigger

Customization

Plus / Minus アイコン

What is your return policy?

Do you offer free shipping?

ChevronRight（90°回転）

Getting Started

Configuration

Anatomy

Best Practices

推奨

避けるべき

Accessibility

キーボード操作

ARIA / WCAG

Related

Tabs

Card

Dropdown