Tags Input
fandhe-frontend-pre-styled-ui の tags_input mod が提供するスタイル済み Tags Input 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
自由入力によるタグ配列。control は role="listbox"、各タグは role="option" を持ち、max 到達時は input が data-invalid/aria-invalid を伴います。
Features
- headless-ui の `tags_input::root` へ委譲し、`size` variant クラスのみを付与する。
- `disabled` の単一状態フラグを直接引数で受け取る。
Anatomy
root
label
control
item
item-preview
item-text
item-delete-trigger
input
hidden-inputAPI 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 | |
| hidden-input | data-disabled | |
| input | data-disabled | |
| input | data-invalid | |
| item | data-disabled | |
| item-delete-trigger | data-disabled | |
| 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 |