UI Component Lab English

← コンポーネント一覧

開閉・切替

Disclosure ディスクロージャー

1つのボタンで、1か所の内容の表示・非表示を切り替える部品。

注文番号はどこで確認できますか？

確認メールの注文日の横に記載しています。

別名

見分けるポイント

短いラベルの横に、閉じているときは右向き、開くと下向きになる三角や山形のアイコンがある。隠れていた内容はラベルのすぐ下に出る。

挙動

  • ラベルを押すと、内容の表示・非表示が切り替わる。
  • 補足の説明など、多くの人には不要な追加情報をしまっておくのに使う。
  • このデモはネイティブの <details> と <summary> 要素を使っており、開閉とキーボード操作はブラウザが受け持つ。

キーボード操作

キー動作
Enter / Space内容を表示・非表示にする。

使い分け・注意点

  • 文字起こしやグラフの元データなど、セクションの中の補足に使う。
  • タイトルには中身が分かる文言を使う。「もっと見る」のような曖昧な文言や、「開く」「閉じる」の切り替えは避ける。
  • アコーディオン: ディスクロージャーは単独の開閉部品で、それを見出し付きで縦に並べたものがアコーディオン。

出典