Tags Input

Root · Label · Control · Input · ClearTrigger · Item · ItemPreview · ItemInput · ItemText · ItemDeleteTrigger

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemDeleteTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreview

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Description
`disabled`	`boolean \| undefined`	—
`index`	`string \| number`	—
`value`	`string`	—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the vessel at rest.
`addOnPaste`	`boolean`	`false`	Whether to add a tag when you paste values into the tag input
`allowDuplicates`	`boolean`	`false`	Whether to allow duplicate tags
`allowOverflow`	`boolean`		Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`autoFocus`	`boolean`		Whether the input should be auto-focused
`blurBehavior`	`'clear' \| 'add'`		The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`defaultInputValue`	`string`		The initial tag input value when rendered. Use when you don't need to control the tag input value.
`defaultValue`	`string[]`		The initial tag value when rendered. Use when you don't need to control the tag value.
`delimiter`	`string \| RegExp`	`","`	The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	`boolean`		Whether the tags input should be disabled
`editable`	`boolean`	`true`	Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	`string`		The associate form of the underlying input element.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item(opts: tagsInput.ItemProps): string; itemDeleteTrigger(opts: tagsInput.ItemProps): string; itemInput(opts: tagsInput.ItemProps): string; }>`		The ids of the elements in the tags input. Useful for composition.
`inputValue`	`string`		The controlled tag input's value
`invalid`	`boolean`		Whether the tags input is invalid
`max`	`number`	`Infinity`	The max number of tags
`maxLength`	`number`		The max length of the input.
`modelValue`	`string[]`		The v-model value of the tags input
`name`	`string`		The name attribute for the input. Useful for form submissions
`placeholder`	`string`		The placeholder text for the input when there are no tags
`readOnly`	`boolean`		Whether the tags input should be read-only
`required`	`boolean`		Whether the tags input is required
`sanitizeValue`	`(value: string) => string`		Function to sanitize the tag value before adding it
`translations`	`tagsInput.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`validate`	`(details: tagsInput.ValidateArgs) => boolean`		Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.

Event	Payload
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: string[]`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`highlightChange`	`details: HighlightChangeDetails`
`inputValueChange`	`details: InputValueChangeDetails`
`update:inputValue`	`value: string`
`valueInvalid`	`details: ValidityChangeDetails`