タグ／チップ
Chip / Tag
別名: チップ、タグ、ピル、ロゼンジ、フィルターチップ、入力チップ、Chip、Tag、Pill、Lozenge、Filter chip、Input chip
生態（さわってみる）
- React
- TypeScript
価格帯で絞り込む
一言定義
短いテキストと任意のアイコンを丸みのある小さな面にまとめ、分類・選択・入力の単位として使う小型要素UI。
分類
使う場面
- 選択済みの値をトグルで外せる状態として見せたい入力（マルチセレクトのタグ入力等）
- 一覧の絞り込み条件を、押して切り替えられる小さなボタン群として見せたいとき（フィルターチップ）
避ける場面
- 操作を伴わず分類ラベルとして表示するだけのとき（→タグ表示、件数のみなら→バッジ）
- 選択肢が多く1行に収まらないとき（→セレクトボックスやオートコンプリート）
近縁種との比較
小型のラベル要素は「チップ（Chip）」「タグ（Tag）」「ピル（Pill）」「ロゼンジ（Lozenge）」「バッジ（Badge）」と呼び名が乱立している領域で、Material Design 3はChip、多くのデザインシステムはTag、Salesforce LightningはPill、Adobe SpectrumはLozengeと呼ぶ。本図鑑が採用する整理は「操作できるのがChip、表示だけならTag/Badge」という区分で、削除・選択・トグルなどユーザー操作を伴う本エントリ（チップ）と、状態や件数を一方的に知らせるだけのバッジとをこの基準で分けている。ロゼンジやピルは主にステータスラベルとして使われ、操作を伴わない点でタグ・バッジ側に近い実装が多い。
近縁種
実例リンク
アクセシビリティ
- role
- 入力チップは削除ボタンを内包するli。フィルターチップはbutton + aria-pressedで選択状態を表す（Toggle Buttonパターン）
- キーボード操作
- 削除ボタンはTab+Enter/Spaceで実行。入力欄でBackspaceを押すと、入力が空のときに末尾のチップを削除する（マウス操作なしでも編集できるようにする配慮）
- 補足
- 入力チップの追加・削除はaria-live領域で件数変化を通知すると親切。フィルターチップは複数選択可否をaria-pressedの運用（単独/複数許可）で表現する