削除可能チップ
削除可能チップは、選択済みのタグやフィルター条件を小さな丸ピル状の枠で並べ、各要素に「×」ボタンを添えた UI 部品です。実装は CSS のみで、 display:inline-flex と gap でラベルと削除ボタンを横並びにし、 border-radius:9999px で完全な角丸にしています。
解説
削除可能チップは、選択済みのタグやフィルター条件を小さな丸ピル状の枠で並べ、各要素に「×」ボタンを添えた UI 部品です。実装は CSS のみで、display:inline-flex と gap でラベルと削除ボタンを横並びにし、border-radius:9999px で完全な角丸にしています。背景の淡い藍色と濃い文字色のコントラストで、クリックできる要素だと自然に伝わる配色です。
使うと効果的な場面
- 検索結果の絞り込み条件を「今こう絞っています」と見せるフィルターバー
- 記事やプロフィールに付けたタグの一覧と編集
- メール宛先やメンバー招待など、追加した相手をその場で外せる入力欄
色を変えるときは background と color をブランド色のペアに差し替えるだけで雰囲気が整います。実際に削除する動きには JavaScript が必要なので、ボタンの click でその要素を取り除く処理を足してください。「×」だけでは読み上げソフトに意味が伝わりにくいため、ボタンには aria-label で「React を削除」のような説明を付けると親切です。指で押せるよう、ボタンの当たり判定は最低でも余白込みで広めに取りましょう。
よくある質問
チップを実際に消すにはどうすればいいですか
見た目は CSS だけで完成しますが、消す動作には JavaScript が必要です。各削除ボタンの click で、親のチップ要素を remove する処理を書けば、その場で取り除けます。
色をブランドに合わせて変えられますか
はい。チップの background と文字色 color のペアを変えるだけで印象が変わります。淡い背景に濃い同系色の文字を組み合わせると、押せる要素だと伝わりやすくなります。