フォーム入力
コンボボックス(検索+複数選択)
入力で候補を絞り込み、選ぶとチップとして入力欄に積み上がる複数選択UI。×で削除、↑↓とEnterのキーボード操作にも対応。
プレビュー
入力
操作実際に入力して試せます。
コード(コピーして使えます)
<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="候補" hidden></ul>
</div>
<p class="cb-hint" id="cb-hint">選択中: 0人</p>
</div>