Disclosure

単一項目の展開/折りたたみ UI（コラプシブル）。HTML の <details>/<summary> の代替として、ブラウザ間のマーカー位置ズレを解消し、kaze のトークンで余白・色・フォントを統一します。内部的には <button> + 領域分けで構築し、aria-expanded/aria-controls を付与、Escape キーで閉じる操作にも対応。FAQ コンポーネントが複数 Q&A の束であるのに対し、Disclosure はテーブル内の補足やヘルプテキストなど任意の場所に単品で挿入できます。

GitHub でソースを見る

プレビュー

変数の値は CSS カスタムプロパティとしてエクスポートされます。

テーマ切り替え時は自動で上書きされるため、上書きが必要な場合は :root より詳細度の高いセレクタを使ってください。

使いどころ

使う場面

  • 補足、FAQ、詳細設定など、必要な人だけが開けばよい内容をたたんでおく
  • defaultOpen で初期状態、open と onOpenChange で制御する
  • icon は "chevron"（既定）か "plus"、variant は default / ghost / bordered から選ぶ

使わない場面

  • ほとんどの人が読むべき内容。最初から見せる
  • 画面を切り替えるような大きな区切り。Tabs を使う
  • 短い補足の説明。Tooltip か HelpButton を使う
  • FAQ を載せるマーケティングページ。FAQ を使う

使い方

<Disclosure title="詳細を見る">
  <p>補足情報をここに。</p>
</Disclosure>

<Disclosure
  title="詳細オプション"
  icon="plus"
  variant="bordered"
  defaultOpen
>
  <p>通知の頻度や、一覧に表示する件数を変更できます。</p>
</Disclosure>

プロパティ

名前型デフォルト説明
title必須ReactNodeなし常時表示される見出し
children必須ReactNodeなし展開時に表示される中身
defaultOpenbooleanfalse初期展開状態（uncontrolled）
openbooleanなし展開状態の制御（controlled）
onOpenChange(open: boolean) => voidなし開閉時に呼ばれるコールバック
icon"chevron" | "plus" | ReactNode"chevron"マーカーアイコン。カスタム ReactNode を渡すと自動回転はオフになります
iconPosition"left" | "right""left"マーカーの表示位置
size"sm" | "md" | "lg""md"トリガー行の密度
variant"default" | "ghost" | "bordered""default"ビジュアル（default: 背景ホバーあり / ghost: 背景なし / bordered: 枠線で囲む）
classNamestringなしルート要素に足すクラス
triggerClassNamestringなし開閉ボタンに足すクラス
contentClassNamestringなし中身の領域に足すクラス
disabledbooleanfalseトリガーを無効化

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tabトリガーにフォーカスを移す
Enter / Space開閉を切り替える
Escape開いているときにトリガーにフォーカスがあれば閉じる

アクセシビリティ

  • トリガーは <button> で、aria-expanded と aria-controls が付く。内容は <section> が aria-labelledby でトリガーの名前を持つ
  • 閉じている内容は hidden になり、読み上げにもタブ移動にも含まれない
  • disabled にするとトリガーも押せなくなる。理由が必要なら近くに文言で示す

文言

  • title は開いたときに何が見えるかが分かる言葉にする（「詳細設定」「配送について」）
  • 「もっと見る」だけにしない。何についてかを入れる

関連するコンポーネント