Tags Input

Tag inputs render tags inside an input, followed by an actual text input. By default, tags are added when text is typed in the input field and the Enter or Comma key is pressed. Throughout the interaction, DOM focus remains on the input element.

Usage Types

API Reference

Root

Prop	Type	Default
addOnPaste	boolean
allowEditTag	boolean
allowOverflow	boolean
asChild	boolean
autoFocus	boolean
blurBehavior	'clear' \| 'add'
defaultValue	string[]
delimiter	string
dir	'ltr' \| 'rtl'
disabled	boolean
form	string
getRootNode	() => ShadowRoot \| Node \| Document
id	string
ids	Partial<{ root: string input: string clearBtn: string label: string control: string item(opts: ItemProps): string itemDeleteTrigger(opts: ItemProps): string itemInput(opts: ItemProps): string }>
inputValue	string
invalid	boolean
max	number
maxLength	number
name	string
onFocusOutside	(event: FocusOutsideEvent) => void
onHighlightChange	(details: HighlightChangeDetails) => void
onInteractOutside	(event: InteractOutsideEvent) => void
onPointerDownOutside	(event: PointerDownOutsideEvent) => void
onValueChange	(details: ValueChangeDetails) => void
onValueInvalid	(details: ValidityChangeDetails) => void
readOnly	boolean
translations	IntlTranslations
validate	(details: ValidateArgs) => boolean
value	string[]

Item

Prop	Type	Default
index	string \| number
value	string
asChild	boolean
disabled	boolean

Input

Prop	Type	Default
asChild	boolean

Label

Prop	Type	Default
asChild	boolean

Control

Prop	Type	Default
asChild	boolean

ItemText

Prop	Type	Default
asChild	boolean

ItemInput

Prop	Type	Default
asChild	boolean

ClearTrigger

Prop	Type	Default
asChild	boolean

ItemDeleteTrigger

Prop	Type	Default
asChild	boolean