DynamicTags
Type in the input and press Enter/comma to create tags; supports deduplication, a maximum limit, and keyboard deletion.
Basic Usage
Deduplicate by default
Example
model-value is a JSON array attribute; duplicate tags are not allowed by default.
Allow Duplicates
allow-duplicate
Example
max Limit
max=3
Example
When max is reached, the input is automatically disabled; deleting a tag restores input.
Placeholder & Disabled
placeholder
Example
disabled
Example
Events
Add/remove events
Example
Listen to oas-add / oas-remove / oas-change:
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
allow-duplicate | Allow duplicate tags | boolean | — |
disabled | Disabled | boolean | — |
max | Maximum number of tags | string | — |
model-value | Tag array (property or JSON) | string[] | [] |
placeholder | Input placeholder | string | — |
Events
| Event | Description |
|---|---|
oas-add | Tag added, detail: { value } |
oas-change | Dispatched after add/remove, detail: { value } |
oas-remove | Tag removed, detail: { value } |
Keyboard: Enter / , to submit; with the input empty, Backspace deletes the last tag.
ARIA: the container has role="list", tags have role="listitem", remove buttons are focusable with an aria-label; when submitting a duplicate, the input is marked aria-invalid with a hint shown.