◇

TagsInput

6 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  TagsInputRoot,
  TagsInputItem,
  TagsInputItemText,
  TagsInputItemDelete,
  TagsInputInput,
  TagsInputClear,
} from '@robonen/primitives/tags-input';

<TagsInputRoot>
  <TagsInputItem />
  <TagsInputItemText />
  <TagsInputItemDelete />
  <TagsInputInput />
  <TagsInputClear />
</TagsInputRoot>

API Reference

TagsInputRoot

Root

Prop	Type	Default	Description
`modelValue`?	`U[]`	—	Controlled value. Use `v-model`.
`defaultValue`?	`U[]`	`[]`	Uncontrolled initial value.
`addOnPaste`?	`boolean`	—	Add on paste (respects `delimiter`).
`addOnTab`?	`boolean`	—	Add on Tab.
`addOnBlur`?	`boolean`	—	Add on blur.
`duplicate`?	`boolean`	—	Allow duplicate tags.
`disabled`?	`boolean`	—	Disable the whole component.
`delimiter`?	`string \| RegExp`	`','`	Character or regex that splits/commits input.
`dir`?	`'ltr' \| 'rtl'`	—	Writing direction. Falls back to `ConfigProvider` when omitted.
`max`?	`number`	`0`	Maximum number of tags. `0` disables the cap.
`convertValue`?	`(raw: string) => U`	—	Map a raw input string to a tag. Required for non-string tag values.
`displayValue`?	`(value: U) => string`	`String(v)`	Render a tag value as text.

TagsInputItem

Item

Prop	Type	Default	Description
`value`	`U`	—	The value associated with this tag.
`disabled`?	`boolean`	—	Disable this specific tag.

TagsInputItemText

ItemText

No props or events — renders its element and forwards attributes.

TagsInputItemDelete

ItemDelete

No props or events — renders its element and forwards attributes.

TagsInputInput

Input

Prop	Type	Default	Description
`placeholder`?	`string`	—	Placeholder text.
`autoFocus`?	`boolean`	—	Focus on mount.
`maxLength`?	`number`	—	Max input length.

TagsInputClear

Clear

No props or events — renders its element and forwards attributes.