タグ／チップ
Chip / Tag短いテキストを丸みのある小さなアイコンにまとめ、フィルター・グルーピング・入力の単位として使う小型UI。
- React
- TypeScript
価格帯で絞り込む
○ 使う場面
- 選択済みの値をトグルで外せる状態として見せたい入力（マルチセレクトのタグ入力等）
- 一覧の絞り込み条件を、押して切り替えられる小さなボタン群として見せたいとき（フィルターチップ）
× 避ける場面
- 操作を伴わず分類ラベルとして表示するだけのとき（→タグ表示、件数のみなら→バッジ）
- 選択肢が多く1行に収まらないとき（→ドロップダウンやオートコンプリート）
別名
チップ、タグ、ピル、ロゼンジ、フィルターチップ、入力チップ
近縁種との比較
小型のラベル要素は「チップ（Chip）」「タグ（Tag）」「ピル（Pill）」「ロゼンジ（Lozenge）」「バッジ（Badge）」と呼び名が乱立している領域で、Material Design 3はChip、多くのデザインシステムはTag、Salesforce LightningはPill、Adobe SpectrumはLozengeと呼ぶ。ロゼンジやピルは主にステータスラベルとして使われ、操作を伴わない点でタグ・バッジ側に近い実装が多い。
| 近縁種 | 違い・使い分け |
|---|---|
| バッジ | 操作できる（削除・選択・トグルなど）のがタグ／チップ、状態や件数を一方的に知らせるだけで操作を伴わないのがバッジ、という基準で区別する。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション