KARAKURIDESIGN SYSTEM

Accordion

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

3
Variants
3
Sizes
2
Expand Mode
Radix
Base

Playground

Preview
D

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

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

Variants

default

Content for item 1

bordered

Content for item 1

splitted

Content for item 1

Sizes

sm
パディング12px 16px
フォント13px
default
パディング16px 16px
フォント14px
lg
パディング20px 24px
フォント16px

Features

Expand Mode

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

Single (default)

Only one open at a time

Multiple

Multiple items can be open

All items open independently

Collapsible

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

This accordion always keeps one item open.

Icon Position

Right (default)

Icon on the right side

Left

Icon on the left side

Disabled

This item is active

API

Component Structure

Accordion— Radix Accordion
.ItemProps.TriggerProps.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

全アイテムを無効化

AccordionItem

value—
string

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

disabledundefined
boolean

このアイテムを無効化

AccordionTrigger

icon内蔵SVG (ChevronDown)
ReactNode

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

Customization

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

Plus / Minus アイコン

You can return any item within 30 days of purchase.

import { Plus, Minus } from 'lucide-react' <AccordionTrigger 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 </AccordionTrigger>

ChevronRight（90°回転）

Follow the installation guide to begin.

import { ChevronRight } from 'lucide-react' <AccordionTrigger icon={ <ChevronRight className="icon-sm shrink-0 text-text-muted transition-transform duration-normal accordion-chevron" /> } > Item text </AccordionTrigger>

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