Dynamic

inputs render tags inside an input, followed by an actual text input.

Features

Can be controlled or uncontrolled.
Full keyboard navigation.
Limit the number of tags.
Accept value from clipboard.
Clear button to reset all tags values.

Install

Import

API

Root

Props	Type	Default
addOnBlur	`boolean`	false
addOnPaste	`boolean`	false
addOnTab	`boolean`	false
as	`AsTag \| Component`	div
asChild	`boolean`	false
defaultValue	`string[]`	undefined
delimiter	`string`	,
dir	`Direction`	ltr
disabled	`boolean`	false
duplicate	`boolean`	false
id	`string`	-
max	`number`	0
modelValue	`string[]`	() => []
name	`string`	-
required	`boolean`	false

Event	Type
invalid	`[_payload: string]`
update:modelValue	`[_value: string[]]`

Slot (default)	Type
modelValue	`string[]`

Data attribute	Value
[data-focused]	Present when focus on input
[data-invalid]	Present when input value is invalid
[data-disabled]	Present when disabled

Item

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
value	`string`	on

Data attribute	Value
[data-state]	'active' \| 'inactive'
[data-disabled]	Present when disabled

ItemText

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false

Slot (default)	Type
text	`string`

ItemDelete

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Data attribute	Value
[data-state]	'active' \| 'inactive'
[data-disabled]	Present when disabled

Input

Props	Type	Default
as	`AsTag \| Component`	input
asChild	`boolean`	false
autoFocus	`boolean`	false
maxLength	`number`	-
placeholder	`string`	undefined

Data attribute	Value
[data-invalid]	Present when input value is invalid

Clear

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Data attribute	Value
[data-disabled]	Present when disabled