タグインプット

component

担当者・タグ・メールアドレスのように、複数の値を 1 つずつ追加・削除して集める入力欄です。追加した値は入力欄の下に、削除ボタン付きのタグとして並べます。入力欄の中へタグを入れる形は支援技術で扱いにくいため採らず、入力欄は普通の インプット、削除ボタンはそれぞれ Tab で止まる普通のボタンにしています。

基本

Enter か「追加」で 1 つずつ追加し、× で削除する。空・重複・上限（5 人）を超える追加は受け付けず、入力欄の真下に理由を出す。追加・削除は aria-live で告知し、削除したらフォーカスを次のタグ（無ければ前・入力欄）へ移す

任意

Enter か「追加」で 1 人ずつ追加（最大 5 人）

  • 山田
  • 佐藤 

<label class="label-control-text" for="assignee">担当者</label>
<div class="tag-input">
  <div class="tag-input-field">
    <input type="text" class="input input-md" id="assignee" aria-describedby="assignee-help" />
    <button type="button" class="btn btn-md btn-neutral btn-outline">追加</button>
  </div>
  <p class="field-support-text" id="assignee-help">Enter か「追加」で 1 人ずつ追加（最大 5 人）</p>
  <ul class="tag-list" aria-label="追加した担当者">
    <li class="tag">
      <span class="tag-label">山田</span>
      <button type="button" class="tag-remove" aria-label="『山田』を削除">
        <svg class="icon" aria-hidden="true"><use href="./icons.svg#lucide-x"></use></svg>
      </button>
    </li>
  </ul>
  <p class="sr-only" aria-live="polite"></p>   <!-- 「『山田』を追加しました」を告知 -->
</div>

状態

エラーは入力欄に input-error ＋ aria-invalid、真下に field-error-text。長い値は 1 行で省略する（全文は削除ボタンの名前に含まれる）。削除ボタンの hover / focus は is-hover-preview / is-focus-preview の見本

エラー（重複）

＊『山田』はすでに追加されています

  • 山田

削除ボタンの enable / hover / focus・長い値

  • enable
  • hover
  • focus
  • tanaka.taro.sales-department@example.co.jp

機能

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

自由に入力する値（担当者・タグ・メールアドレス等）を複数集めるフォームの入力欄。追加した値はタグで見せ、1 つずつ削除できる。
選択肢が決まっているなら checkbox（多ければ select 等の一覧から選ぶ）、値 1 つなら input。
一覧の絞り込みのトグルは filter-chip、状態の表示は badge（どちらも tag ではない）。