× 削除可能タグ
ラベルの右側に丸い × ボタンを備えた、チップ型の削除可能タグです。 display:inline-flex でラベルとボタンを横並びにし、 flex-wrap で行に収まらないタグは自動で折り返します。
解説
ラベルの右側に丸い × ボタンを備えた、チップ型の削除可能タグです。display:inline-flex でラベルとボタンを横並びにし、flex-wrap で行に収まらないタグは自動で折り返します。各 × ボタンには JavaScript で onclick を割り当て、押すと parentElement.remove() でタグ自身を画面から消します。クリックひとつで条件やタグを取り除けるため、絞り込みの解除やタグ編集の体験が軽快になります。
よく使う場面
- 検索結果に適用中のフィルター（解除できるチップ）
- 記事やプロフィールに付けたタグの編集
- メール宛先や招待者の追加・削除リスト
チップの色は背景の background、× ボタンの円は半透明の白で重ねているため、地の色を変えるだけで全体のトーンが揃います。実運用ではタグの元データ（配列など）からも該当要素を消す処理を足すと、表示と状態がずれません。注意点として、× ボタンには「削除」の意味が伝わるラベルを補い、キーボードでも押せるよう button 要素のまま扱うとアクセシビリティが保てます。
よくある質問
× を押すと何が起きますか。
押されたボタンの親要素であるタグ自身が画面から削除されます。実データの配列も使っている場合は、あわせてその要素を配列から取り除く処理を足すと表示と状態が一致します。
タグの色や形は変えられますか。
変えられます。チップの background で地の色を、border-radius で角の丸みを調整できます。× ボタンの円は半透明の白なので、地の色を変えるだけで自然に馴染みます。