タブ（概要）｜デジタル庁デザインシステムβ版

クリアホルダーのインデックス用見出し（耳）をメタファーとしたタブラベルと、関連付けられたタブパネルの組み合わせのコンポーネントです。一定の領域の範囲内で、複数のコンテンツを切り替え表示できるコンポーネントです。

ユースケース

複数のセクションを同時に表示したい場合はアコーディオンを使う: タブは1つのタブパネルだけを表示し、他のタブパネルは隠されます。複数のセクションを同時に開いて比較したい場合は、アコーディオンを使用してください。アコーディオンでは、複数のセクションを同時に展開できます。
水平メニューとタブを使い分ける: サイトやアプリ内のカテゴリや目的地へ移動する場合は水平メニューを使用します。同じ主題のコンテンツを、概要・仕様・レビューなどの観点で扱う場合はタブを使用します。
一連の手続きの進行を示す場合はステップナビゲーションを使う: タブは同じ主題のコンテンツを切り替えるためのものです。完了までに必要な作業を順序立てて示し、現在の進行状況を把握できるようにする場合は、ステップナビゲーションを使用してください。
フィルタリングにはタブを使わない: 条件で項目を絞り込む操作には、目的に合ったフォームコントロールを使用してください。タブは、条件で項目を減らすのではなく、同じ主題の異なるコンテンツを切り替えるために使用します。