Tags Input

Create, navigate, and remove free-form tokens from one text field.

Usage

Skills

Create and remove free-form skill tags without losing input focus.

Create and remove free-form skill tags without losing input focus.

VueDOMAccessibility

Press Enter or comma to add a tag.

Limited

Enforce the configured item or visible-notification limit without losing existing values.

Enforce the configured item or visible-notification limit without losing existing values.

VueDOMAccessibility

Press Enter or comma to add a tag.

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Let the parent own the current value and apply accepted changes back to the component.

VueDOMAccessibility

Press Enter or comma to add a tag.

API

Vue package: @sectile/vue/tags-input

Components

• TagsInputRoot
• TagsInputItem
• TagsInputItemText
• TagsInputItemDelete
• TagsInputInput
• TagsInputClear

Props

TagsInputRootProps

as

TypePrimitiveAsDefault'div'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

defaultInputValue

TypestringDefault''

Initial uncontrolled text shown by the editable input.

defaultValue

Typereadonly string[]Default[]

Initial value used when the component owns its state.

disabled

TypebooleanDefaultfalse

Whether interaction is unavailable.

form

TypestringDefaultundefined

ID of the native form associated with the control.

inputValue

TypestringDefaultundefined

Controlled text currently shown by the editable input.

label

TypestringDefault'Tags'

Accessible name announced for the control.

modelValue

Typereadonly string[]Defaultundefined

Current value when state is controlled by the parent.

name

TypestringDefaultundefined

Name used for native form submission.

policies

TypeTagsInputPoliciesDefaultundefined

Behavior policies that customize validation, movement, or selection.

readonly

TypebooleanDefaultfalse

Whether the value can be inspected but not changed.

required

TypebooleanDefaultfalse

Whether the control must contain a valid value before submission.

TagsInputItemProps

as

TypePrimitiveAsDefaultundefined

Element or component rendered for this part.

asChild

TypebooleanDefaultundefined

Whether to merge this part into its single child instead of rendering a wrapper.

index

TypenumberDefaultRequired

Zero-based position of this part in its parent collection.

TagsInputPartProps

as

TypePrimitiveAsDefaultVaries by part

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

Slots

TagsInputRootSlotProps

disabled

Typeboolean

Whether interaction is unavailable.

inputValue

Typestring

Current editable input text.

readonly

Typeboolean

Whether the value can be inspected but not changed.

value

Typereadonly string[]

Current value exposed by this contract.

TagsInputItemSlotProps

disabled

Typeboolean

Whether interaction is unavailable.

index

Typenumber

Zero-based position in the parent collection.

readonly

Typeboolean

Whether the value can be inspected but not changed.

value

Typestring

Current value exposed by this contract.

Events

TagsInputRoot

update:inputValue

Payloadstring

Emitted when editable input text changes.

update:modelValue

Payloadreadonly string[]

Emitted when the component requests a new controlled value.

Other types

TagsInputValueChangeHandler

type TagsInputValueChangeHandler = (value: readonly string[]) => void

TagsInputInputValueChangeHandler

type TagsInputInputValueChangeHandler = (value: string) => void

Parts

Shared scope: [data-scope="tags-input"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
root	[data-part="root"]	Defines the component boundary and owns its composed parts.	—
item	[data-part="item"]	Represents one selectable or actionable item.	—
item-text	[data-part="item-text"]	Renders the item label independently from its controls.	—
item-delete	[data-part="item-delete"]	Removes its owning item.	—
input	[data-part="input"]	Accepts the editable value or draft.	—
clear	[data-part="clear"]	Clears the current value or collection.	—

Keyboard interaction

Key	Behavior
Enter / Comma	Commit the current input as a tag.
Arrow Left / Arrow Right	Move between the input and existing tags.
Backspace / Delete	Move to or remove the current tag according to cursor state.

Accessibility

The labeled group keeps its text input native and names every removable tag action.