アコーディオンAccordion
Experimental

見出しをクリックすると該当セクションが開閉する縦積みの UI です。

状態とバリエーション

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"	アイコンホバー時に表示するツールチップ文言です。