tags-input

Tags Input

An underlined field that collects several short values as removable tags, such as materials or interests; joins a Field around it.

States: Default, Focus, Invalid

Parts

Part	File	Does
TagsInput	TagsInput.vue	Groups all parts of the tags input, where the user enters several short values.
TagsInputInput	TagsInputInput.vue	Lets the user type a new tag and add it to the tags input.
TagsInputItem	TagsInputItem.vue	Groups the text and delete button of one tag.
TagsInputItemDelete	TagsInputItemDelete.vue	Lets the user remove its tag.
TagsInputItemText	TagsInputItemText.vue	Shows the value of one tag.

Anatomy

<TagsInput>
  <TagsInputItem>
    <TagsInputItemText />
    <TagsInputItemDelete />
  </TagsInputItem>
  <TagsInputInput />
</TagsInput>

Styling

Part	Recipe
TagsInput	tags-input
TagsInputInput	tags-input-input
TagsInputItem	tags-input-item
TagsInputItemDelete	tags-input-item-delete
TagsInputItemText	tags-input-item-text

Install

Writes 6 files into components/ui/tags-input/. For agents, npx @frontic/ui docs tags-input prints this reference as markdown; the MCP server serves the same.

Installs with it: use-field-control
npm packages: @lucide/vue; @vueuse/core; reka-ui

API reference

TagsInput TagsInput.vue

Groups all parts of the tags input, where the user enters several short values.

Prop	Type	Default
modelValue	AcceptableInputValue[] \| null	—

defaultValue	AcceptableInputValue[]	—

addOnPaste	boolean	false

addOnTab	boolean	false

addOnBlur	boolean	false

duplicate	boolean	false

disabled	boolean	false

delimiter	string \| RegExp	','

dir	Direction	—

max	number	0

id	string	—

convertValue	((value: string) => AcceptableInputValue)	—

displayValue	((value: AcceptableInputValue) => string)	—

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
name	string	—

required	boolean	false

class	ClassValue	—

Event	Payload
update:modelValue	payload: AcceptableInputValue[]

invalid	payload: AcceptableInputValue

addTag	payload: AcceptableInputValue

removeTag	payload: AcceptableInputValue

Slot	Slot props
default	{ modelValue: AcceptableInputValue[]; }

Recipe tags-input	Sets
base: tags-input	21 properties · 13 inherited
gap spacing.20.5rem minHeight spacing.102.5rem paddingX spacing.00rem paddingY spacing.10.25rem display `flex` flexWrap `wrap` alignItems `center` focusWithin › borderBottom border.focus2px solid #71717a backgroundColor `transparent` from @control border border.default1px solid #e4e4e7 from @control borderColor `transparent` from @control borderBottomColor colors.input#a1a1aa from @control rounded rounded.none0px from @control typography typography.control400 1rem/1.5 'Inter Variable', Inter, sans-serif from @control placeholderColor colors.muted-foreground#66666f from @control focus › borderBottom border.focus2px solid #71717a from @control invalid › borderBottomColor colors.destructive#c70009 from @control file › backgroundColor `transparent` from @control-line file › border `none` from @control-line file › textColor colors.foreground#09090b from @control-line file › typography typography.ui500 0.875rem/1.43 'Inter Variable', Inter, sans-serif from @control-line

Parts

Anatomy

Styling

Install

API reference

TagsInput TagsInput.vue

TagsInputInput TagsInputInput.vue

TagsInputItem TagsInputItem.vue

TagsInputItemDelete TagsInputItemDelete.vue

TagsInputItemText TagsInputItemText.vue