コンボボックス（検索＋複数選択）
入力で候補を絞り込み、選ぶとチップとして入力欄に積み上がる複数選択UI。×で削除、↑↓とEnterのキーボード操作にも対応。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 担当者・ラベルなど候補から複数選んでチップに積む入力
- 検索で絞ってから選ばせたい割り当て画面
- 選んだ人数をその場で示したいフォーム
- 避ける場面
- 1つしか選べない値（セレクトを使う）
- 候補に無い自由語を追加させたい欄（タグ入力を使う）
- 構成要素
- ラベル
- 入力枠
- 選択チップ（×付き）
- 入力欄
- 候補リスト（アバター）
- 選択数
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 空
- キーボード
↓ で候補を開いて移動、↑ で戻る、Enter で追加、空欄で Backspace で最後のチップを外す、Esc で閉じる。× は Shift+Tab で到達
- 支援技術
role=combobox・aria-autocomplete=list・aria-expanded・aria-controls・aria-activedescendant（閉じるときに外す）。リストは aria-multiselectable、候補は option。× は aria-label。選択数は live
- 動き
枠色 200ms（フォーカス）。reduced-motion で無効
デザインの要点
- 選んだ候補はリストから消す。選択済みが残っていると同じ人を二度押せて、チップも重複する
- チップは入力欄と同じ枠の中に積む。別の場所に出すと「選んだ」と「まだ打っている」の関係が見えない
- 空欄で Backspace を押したら最後のチップを外す。マウスに持ち替えずに選び直せる
- 追加したあとは入力欄へフォーカスを戻し、リストを開いたままにする。続けて2人目を選ぶのが普通
コード（コピーして使えます）
<div class="cb-wrap">
<label class="cb-label" for="cb-input">担当者を割り当て</label>
<div class="cb-field" id="cb-field">
<span class="cb-tags" id="cb-tags"></span>
<input
id="cb-input"
class="cb-input"
type="text"
placeholder="名前を入力"
autocomplete="off"
role="combobox"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="cb-list"
/>
<ul class="cb-list" id="cb-list" role="listbox" aria-label="候補" aria-multiselectable="true" hidden></ul>
</div>
<p class="cb-hint" id="cb-hint" aria-live="polite">選択中: 0人</p>
</div>