Reka UI logoReka
backdrop
PropDefaultType
addOnBlur
boolean

When true allow adding tags blur input

addOnPaste
boolean

When true, allow adding tags on paste. Work in conjunction with delimiter prop.

addOnTab
boolean

When true allow adding tags on tab keydown

as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

convertValue
((value: string) => AcceptableInputValue)

Convert the input value to the desired type. Mandatory when using objects as values and using TagsInputInput

defaultValue
[]
AcceptableInputValue[]

The value of the tags that should be added. Use when you do not need to control the state of the tags input

delimiter
','
string | RegExp

The character or regular expression to trigger the addition of a new tag. Also used to split tags for @paste event

dir
'ltr' | 'rtl'

The reading direction of the combobox when applicable.
If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.

disabled
boolean

When true, prevents the user from interacting with the tags input.

displayValue
value.toString()
((value: AcceptableInputValue) => string)

Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values

duplicate
boolean

When true, allow duplicated tags.

id
string
max
0
number

Maximum number of tags.

modelValue
AcceptableInputValue[] | null

The controlled value of the tags input. Can be bind as v-model.

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

EmitPayload
addTag
[payload: AcceptableInputValue]

Event handler called when tag is added

invalid
[payload: AcceptableInputValue]

Event handler called when the value is invalid

removeTag
[payload: AcceptableInputValue]

Event handler called when tag is removed

update:modelValue
[payload: AcceptableInputValue[]]

Event handler called when the value changes

Slots (default)Payload
modelValue
string | Record<string, any>

Current input values