メニュー

ディスクロージャーディスクロージャー

スクリーンショット:閉じた状態と開いた状態のディスクロージャー。

ディスクロージャーは、メイン情報に対する追加情報を折りたたんで提示するときに使用します。

ユースケース

メイン情報に対して、補足や注釈などの追加情報を折りたたんで提示するとき
  • 申し込みフォームにおいて、特定条件のみの例外説明を折りたたんで提示する
  • グラフに対して、元データとしての表を折りたたんで提示する
  • 動画に対して、文字起こしテキストを折りたたんで提示する
メイン機能に対して、詳細オプションなどの追加機能を折りたたんで提示するとき
  • 設定パネル内での詳細設定を、折りたたんで提示する
  • 検索ボックスにおける詳細検索を、折りたたんで提示する

注意が必要なケース

表示領域をコンパクトにするためだけにディスクロージャーを使ってはいけません
ディスクロージャーは、セクション内において追加で参照すると有益な補足情報を、主題の邪魔にならないようにコンパクトに表示するためのコンポーネントです。ディスクロージャーの内容が重要な情報で、必ず展開しないといけないような場合は、ディスクロージャーを使用することができません。
内容が多くのユーザーにとって重要なときにディスクロージャーを使ってはいけません
ディスクロージャーを展開せずとも、セクション内の地の文章・コンテンツだけで必要最低限の情報が伝達できるようになっていなければなりません。ディスクロージャーの展開が必須となるような文章構成の場合は、ディスクロージャーを使用することができません。
セクション全体を折りたたむ時はアコーディオンを使用してください
ディスクロージャーはセクション内の一部を折りたたみ可能にするコンポーネントです。セクション全体を折りたたむ場合はアコーディオンを使用してください。

各種リソース

種別リソース状態
デザインデザインデータ(Figma)提供中
HTML版実装ソースコード(GitHub)提供中
サンプル(Storybook)提供中
React版実装ソースコード(GitHub)提供中
サンプル(Storybook)提供中