アコーディオンAccordionExperimental
見出しをクリックすると該当セクションが開閉する縦積みの UI です。
プレビュー
状態とバリエーション
1つだけ開く
FAQ や設定説明では、1つだけ開ける構成にすると読み進めやすくなります。
アイコン変更
FAQ やヘルプでは、開く前は +、開いた後は × に回転するアイコンが自然な場合があります。
複数を同時に開く
比較しながら読む仕様や設定では、複数の項目を同時に開ける方が自然です。
無効化
開閉できない項目は薄い表示にし、ホバーで理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| type | "single" | "multiple" | - | 同時に開ける項目数を指定します。 |
| collapsible | boolean | - | single の時、開いている項目を再クリックで閉じられるようにします。 |
| disabled | boolean | - | アコーディオン全体の操作を無効化します。 |
| defaultValue | string | string[] | - | 初期表示で開く項目の value です。 |
| indicator | "chevron" | "plus" | "none" | "chevron" | トリガー右端の開閉アイコンを指定します。FAQ では plus が使いやすい場合があります。 |
| openLabel / closeLabel | string | "Open" / "Close" | アイコンホバー時に表示するツールチップ文言です。 |
使い方
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@gunjo/ui";
const sections = [
{
id: "billing",
title: "請求設定",
body: "支払い方法、請求書、更新日を確認できます。",
},
{
id: "team",
title: "チーム設定",
body: "メンバー招待と権限を管理できます。",
},
];
export function SettingsAccordion() {
return (
<Accordion type="single" collapsible className="w-full max-w-md">
{sections.map((section) => (
<AccordionItem key={section.id} value={section.id}>
<AccordionTrigger>{section.title}</AccordionTrigger>
<AccordionContent>{section.body}</AccordionContent>
</AccordionItem>
))}
</Accordion>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。