タグ（チップ）入力欄
このタグ（チップ）入力欄は、テキスト入力で Enter キーを押すたびに、入力値を丸いチップとして欄内に積み重ねていく UI です。各チップには × ボタンが付き、押すとそのチップだけが消えます。
解説
このタグ（チップ）入力欄は、テキスト入力で Enter キーを押すたびに、入力値を丸いチップとして欄内に積み重ねていく UI です。各チップには × ボタンが付き、押すとそのチップだけが消えます。実装は素の JavaScript で、keydown を監視して Enter のとき要素を生成し、flex-wrap でチップを自然に折り返しています。入力欄全体は :focus-within で枠色が変わり、フォーカス状態が分かりやすくなっています。
使う場面
- プロフィールのスキルや興味タグの登録
- ブログ記事やナレッジ記事のタグ付け
- 求人・人材サービスの希望条件の複数入力
カスタマイズは、チップ背景の #667eea をブランド色に変えるだけで馴染みます。実務に載せるなら、同じタグの重複追加を防ぐチェックや、生成したタグを配列に貯めてフォーム送信時に hidden へ渡す処理を足すと完成度が上がります。× ボタンには aria-label を付けているので読み上げにも配慮できています。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
追加したタグを送信時にどう受け取りますか。
このサンプルは見た目だけなので、追加のたびにタグ文字列を配列に push しておき、フォーム送信時に hidden input かカンマ区切りの値としてサーバーへ渡す処理を足してください。
同じタグを何度も追加させないようにできますか。
できます。Enter を押した時点で既存チップのテキスト一覧を見て、同じ値があれば追加をスキップする条件を 1 行足すだけで重複を防げます。