タグ入力
入力してEnterでタグ（チップ）が追加され、×ボタンで削除できる。日本語タグの初期表示あり。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 記事タグ・スキルなど自由語を複数積むフォーム
- Enter や「,」で区切って素早く追加させたい入力
- 追加したものを × で個別に外させたい欄
- 避ける場面
- 候補から選ばせたい入力（コンボボックスを使う）
- 1つしか持てない値
- 構成要素
- ラベル
- 入力枠
- タグチップ（×付き）
- 入力欄
- ヒント
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Enter または「,」でタグ追加、空欄で Backspace で最後のタグを削除。× ボタンは Tab で到達し Enter／Space。削除後は次の × か入力欄へフォーカス
- 支援技術
label[for] で入力欄に名前を結び、aria-describedby でヒントを関連付ける。削除ボタンに aria-label「〜を削除」、:focus-visible でリング。追加・削除・重複は visually-hidden の aria-live=polite で通知
- 動き
枠色 200ms（フォーカス）。reduced-motion で無効
デザインの要点
- Enter と「,」の両方で確定させる。カンマ区切りで貼る癖のある人は、Enter だけだと1つの長いタグになる
- 空欄で Backspace を押したら最後のタグを消す。マウスに持ち替えずに打ち直せる
- 重複は足さずに「すでにあります」と知らせる。黙って無視すると Enter が効かなくなったように見える
- × で消したあとのフォーカスは隣の × か入力欄へ。消えた要素に置いたままだと body へ落ちる
コード（コピーして使えます）
<div class="ti-wrap">
<label class="ti-label" for="ti-input">タグ</label>
<div class="ti-box" id="ti-box">
<div class="ti-tags" id="ti-tags"></div>
<input
id="ti-input"
class="ti-input"
type="text"
placeholder="入力してEnter"
autocomplete="off"
aria-describedby="ti-hint"
/>
</div>
<p class="ti-hint" id="ti-hint">Enterまたは「,」で追加</p>
<span class="ti-sr" id="ti-live" aria-live="polite"></span>
</div>