Tags Input

fandhe-frontend-pre-styled-ui の tags_input mod が提供するスタイル済み Tags Input 部品です。

Demo

自由入力によるタグ配列。control/item-preview は role を持たず、アクセシブルネームは label の関連付けが担います。max 到達時は input が data-invalid/aria-invalid を伴います。編集中のタグは item-input（ネイティブ input）で表示されます。

Skills

rust

wasm

Editing

Read-only

staging

At max (2)

Disabled

readonly

Features

headless-ui の tags_input::root へ委譲し、size variant クラスのみを付与する。
disabled の単一状態フラグを直接引数で受け取る。

Anatomy

root
  label
  control
    item
      item-preview
        item-text
        item-delete-trigger
    input
  hidden-input
      item-input

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`disabled`	`bool`	`false`	無効化状態。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（通常タグ列 + 入力欄を含む）。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-disabled`	（値なし）
`control`	`data-invalid`	（値なし）
`control`	`data-readonly`	（値なし）
`hidden-input`	`data-disabled`	（値なし）
`hidden-input`	`data-invalid`	（値なし）
`hidden-input`	`data-readonly`	（値なし）
`input`	`data-disabled`	（値なし）
`input`	`data-empty`	（値なし）
`input`	`data-invalid`	（値なし）
`input`	`data-readonly`	（値なし）
`item`	`data-disabled`	（値なし）
`item`	`data-editing`	（値なし）
`item`	`data-value`	`a`, `b`, `go`, `readonly`, `rust`, `staging`, `wa`, `wasm`
`item-delete-trigger`	`data-disabled`	（値なし）
`item-delete-trigger`	`data-highlighted`	（値なし）
`item-preview`	`data-disabled`	（値なし）
`item-preview`	`data-highlighted`	（値なし）
`item-preview`	`data-value`	`a`, `b`, `go`, `readonly`, `rust`, `staging`, `wasm`
`item-text`	`data-disabled`	（値なし）
`item-text`	`data-highlighted`	（値なし）
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`root`	`data-disabled`	（値なし）

CSS Variables

Variable	Default
`--fandhe-tags-input-chip-padding-x`	`0.5rem`
`--fandhe-tags-input-chip-padding-y`	`0.125rem`
`--fandhe-tags-input-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-tags-input-input-min-width`	`6rem`
`--fandhe-tags-input-item-input-width`	`4rem`