Skip to content
fandhe-frontend
GitHub

Tags Input

fandhe-frontend-headless-ui の tags_input mod が提供するタグ配列入力の unstyled 部品です。Root / Label / Control / Input / Item / ItemPreview / ItemText / ItemInput / ItemDeleteTrigger / ClearTrigger / HiddenInput / LiveRegion の 12 anatomy パーツを持ち、タグ文字列の可変長リスト + 重複拒否 + 上限 + 編集中インデックスを表現する値状態機械を備えます。重複・カンマ含有・空文字列のタグはすべての入口で拒否されます。LiveRegion はタグ数の変化を aria-live="polite" で支援技術へ通知します（テキスト更新の実配線は wasm-full の後続責務）。

/themes/ 側の TagsInput（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Tags Input を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

rust
1 tag

Features

  • Root / Label / Control / Input / Item / ItemPreview / ItemText / ItemInput / ItemDeleteTrigger / ClearTrigger / HiddenInput / LiveRegion の 12 anatomy パーツと、タグ文字列の可変長リスト + 重複拒否 + 上限 + 編集中インデックスを持つ値状態機械を提供する。
  • 不変条件「重複タグなし・`len() <= max`・カンマを含まない・空文字列を含まない」を破る入力は dispatch・hydration・コンストラクタのすべての入口で一貫して拒否する（カンマ・空文字列はフォーム送信値のカンマ結合時に曖昧さを生むため、Cursor Bugbot 指摘を踏まえ全入口で禁止）。
  • `control` は `role="listbox"` + `aria-orientation="horizontal"` を持ち、`item_preview` は `role="option"` + `aria-selected="true"` 固定（常に選択済みタグを表示するため）。
  • `editing`（編集中インデックス）は ephemeral な DOM 状態のため hydration では運ばない。
  • `live_region` はタグ数の変化を通知する live region（`role="status"` + `aria-live="polite"` 固定、`root` の直接の子で `control` の兄弟として配置する。テキスト更新の実配線は `fandhe-frontend-wasm-full` の後続責務、イシュー #1069）。

Anatomy

root
  label
  control
    item
      item-preview
        item-text
        item-delete-trigger
    input
  clear-trigger
  hidden-input
  live-region

API Reference

Arguments

NameTypeDefaultDescription
root/item(disabled)bool`data-disabled` を反映する。
control(invalid)bool`data-invalid` を反映する。
control(label_text)&str`aria-label` として付与する（listbox 相当の ARIA）。
item(editing)bool編集モード中かどうか。`data-editing` 存在属性へ反映する。
item_preview(highlighted)bool`data-highlighted` へ反映する（`aria-selected="true"` 固定とは独立の軸）。
item_input(value)&str編集中の暫定値。
item_delete_trigger(tag)&str`aria-label` を `"Delete {tag}"` として動的生成する（`children` の視覚的内容とは独立に常時付与）。
input(value)&str新規タグ入力用のネイティブ入力欄の値。
input(at_max)bool上限到達時に `data-invalid` + `aria-invalid="true"` を出力する。
hidden_input(name, value)&str, &strフォーム送信名と、全タグのカンマ結合値。
live_region(children)Vec<Node>role="status"/aria-live="polite"/aria-atomic="true" を固定付与する live region。通知文言は children として呼び出し側が渡す（イシュー #1069）。

Examples

At max (invalid input)

上限に達した状態の `input(at_max: true)`。`data-invalid` + `aria-invalid="true"` が新規タグ入力欄に出力される。

rust
wasm

Accessibility

WAI-ARIA

AttributeDescription
role="listbox" / aria-orientation (control)固定付与（`aria-orientation="horizontal"`）。
role="option" / aria-selected (item_preview)固定付与。常に選択済みタグを表示するため `aria-selected="true"` 固定。
aria-invalid (input)上限到達（`at_max`）時のみ `"true"` を出力する。
aria-label (item_delete_trigger)`"Delete {tag}"` を動的生成する（`render()` の既定エスケープ経由）。
role="status" / aria-live="polite" / aria-atomic="true" (live_region)タグ数の変化を通知する live region に固定付与する（イシュー #1069）。