UI Component Lab English

← コンポーネント一覧

データ表示

Tag タグ

内容の分類や、適用中の絞り込みを示す短いキーワードのラベル。

  • 赤
  • Mサイズ
  • 5,000円以下

別名

見分けるポイント

短い単語の入った小さな角丸のラベル。外せるタグは末尾に小さな「×」がある。

バリエーション

選択できるタグ
オン・オフを切り替えられるもの。ページ内の内容の絞り込みに使うことが多い。

挙動

  • 表示だけのタグは内容にラベルを付けるだけで、外せるタグは絞り込みの解除などに使う。
  • 「×」はそれぞれボタンで、「赤を外す」のようにタグ名を含む名前を付ける。
  • このデモではタグを外したあと、キーボード利用者が迷わないよう、隣のタグのボタンにフォーカスを移す。

キーボード操作

キー動作
Tab外すボタンの間を移動する。
Enter / Spaceタグを外し、隣のタグへフォーカスを移す。

使い分け・注意点

  • × で外せるチップは、利用者が選んだ値や入力した値に使う。取り消せない削除には使わない。
  • 表示だけのチップは状態や分類に使い、色だけで区別しない。
  • バッジ: タグは単独で内容のラベルとして置き、バッジは別の要素に付けて件数や状態を示す。

出典