タグ

component

利用者が追加・選択した値（担当者・キーワード・絞り込みの条件など）を 1 つずつ見せる小さな pill です。削除ボタン（×）でその値だけを外せます。タグインプット（追加した値の一覧）と テーブル の見出し行（適用中の条件）で使っています。ものの状態を見せる バッジ や、押して ON / OFF する フィルターチップ とは役割が違います。

基本

複数のタグは ul.tag-list ＞ li.tag で並べ、ul に aria-label。× を押すとそのタグが外れ、フォーカスは次のタグ（無ければ前）の × へ移り、結果が読み上げられる

  • 山田
  • 佐藤
  • 鈴木

<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>   <!-- 「『山田』を削除しました」を告知 -->

状態

削除ボタンの hover / focus は is-hover-preview / is-focus-preview の見本。値を外せない場所（確認画面など）では削除ボタンを置かない。長い値は 1 行で省略する（全文は削除ボタンの名前に含める）

削除ボタンの enable / hover / focus

  • enable
  • hover
  • focus

削除ボタンなし（確認画面など）

  • 山田
  • 佐藤

長い値

  • tanaka.taro.sales-department@example.co.jp

機能

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

利用者が追加・選択した値を 1 つずつ見せ、× で外せるようにする。
ものの状態・分類を見せる表示だけのラベルは badge（押せない・外せない）。押して ON/OFF する絞り込みは filter-chip。
値を入力して集める入力欄は tag-input（中でタグを使う）、表の適用中の条件は data-table-conditions（中でタグを使う）。