タグ入力チップスUI

解説

タグ入力チップス UI は、入力欄に文字を打って Enter を押すと、その語が角丸の小さな札（チップ）として並ぶ部品です。JavaScript は Enter またはカンマの入力を合図に、入力値から余計なカンマを取り除いてチップ要素を生成し、入力欄の手前へ挿入します。各チップには削除ボタンが付き、押すとそのチップだけが消えます。枠は flex-wrap で複数行に折り返し、focus-within で入力中の枠線色を変えて、ボックス全体のどこをクリックしても入力欄にフォーカスが移るようにしています。

こんな場面で使えます

• 記事やメモへのタグ付け、キーワードの登録
• メールの宛先や招待者など、複数の項目を続けて入れる入力
• 検索条件や絞り込みフィルターの複数選択

チップの色は background と文字色を、形は border-radius を変えて調整できます。区切りに使うキーを増やしたい場合は判定条件にキーを追加します。注意点として、同じ語の重複チェックや空文字の除外を入れると入力品質が上がり、削除ボタンには分かりやすいラベルを付けると操作しやすくなります。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録