マルチセレクター

component

決まった選択肢から複数を選ぶ、折りたたみ式の入力欄です。見た目は セレクター と同じ枠のボタンで、押すとパネルが開き、中の チェックボックス で選びます。選んだ値はボタンに要約して表示します。パネルの中は普通のチェックボックスなので、Tab で移動・Space で切り替えでき、フォームの送信にもそのまま乗ります。

size × state

valid

small medium large enable / empty
enable / filled
disabled

isInvalid=true

bg negative/50 · border 2px negative/500（ボタンに multi-selector-error、真下に field-error-text）

small medium large enable / empty
enable / filled

基本

ボタンを押すとパネルが開き、チェックボックスで選ぶ。選んだその場でボタンの表示（名前を「、」でつなぐ）に反映する。ほぼ全部を選ぶことが多いなら先頭に「すべて」（一部だけ選ぶと一部選択の表示）

表示する列
<span class="label-control-text" id="cols-label">表示する列</span>
<div class="multi-selector multi-selector-md">
  <button type="button" class="multi-selector-trigger" aria-labelledby="cols-label cols-value"
          aria-haspopup="dialog" aria-expanded="false" popovertarget="cols-panel">
    <span class="multi-selector-value" id="cols-value" data-placeholder="選択してください">振込日、振込先、金額</span>
  </button>
  <div class="multi-selector-panel" id="cols-panel" popover role="dialog" aria-labelledby="cols-label">
    <label class="checkbox-label multi-selector-option multi-selector-all"><input type="checkbox" class="checkbox" data-select-all />すべて</label>
    <label class="checkbox-label multi-selector-option"><input type="checkbox" class="checkbox" name="cols" value="date" checked />振込日</label>
    …
  </div>
</div>

グループ・件数の表示

選択肢に種類があるなら fieldset ＋ legend.multi-selector-group-title で分ける。ツールバーなど幅が狭い場所は data-summary="count" で「3 件選択」と出す

対象部署

機能

このコンポーネントの用途

決まった選択肢（数個〜15 個ほど）から複数を選ぶフォームの入力欄。選択肢を常に並べる場所が無いときに折りたたむ。
場所があるなら checkbox を並べる（一覧性が高い）。1 つだけ選ぶなら selector / select、自由に入力した値を集めるなら tag-input。
一覧を今すぐ絞り込むトグルは filter-chip、表の見出し行の絞り込みは data-table-filter-panel。