ITagsInput ​

A field that collects a list — labels on an issue, recipients on a message, skills on a profile. Each entry becomes a tag that can be removed on its own.

<script setup lang="ts">
const topics = ref(['design', 'accessibility'])
</script>

<template>
  <ITagsInput v-model="topics" placeholder="Add a topic" aria-label="Topics" />
</template>

Press Enter to commit a tag, Backspace on an empty field to remove the last one.

Committing a tag ​

Enter always commits. Three props add the other moments a reader expects a tag to be taken:

• add-on-blur — commit what is typed when focus leaves, rather than discarding it.
• add-on-tab — commit when Tab moves focus along.
• add-on-paste — split a pasted string on the delimiter instead of taking it as one tag.

<ITagsInput
  v-model="recipients"
  placeholder="Paste a list of addresses"
  aria-label="Recipients"
  add-on-paste
  add-on-blur
/>

The delimiter is a comma by default, so pasting a comma-separated list does the obvious thing. Pass delimiter for something else — a string or a regular expression.

Duplicates ​

Refused by default. The attempt still emits invalid-tag, so you can say why; duplicate allows them.

<ITagsInput
  v-model="tags"
  placeholder="Try adding “design” again"
  aria-label="Tags"
  @invalid-tag="tag => notify(`${tag} is already there`)"
/>

<!-- or allow them -->
<ITagsInput v-model="tags" duplicate />

A maximum ​

Past max the input goes read-only rather than disappearing, so the field keeps its label and its focus target.

<ITagsInput v-model="tags" :max="2" aria-label="Limited tags" />

Clearable ​

<ITagsInput v-model="tags" clearable aria-label="Clearable tags" />

Sizes ​

The field and its tags scale together.

<ITagsInput v-model="tags" size="sm" aria-label="Small" />
<ITagsInput v-model="tags" size="md" aria-label="Medium" />
<ITagsInput v-model="tags" size="lg" aria-label="Large" />

Invalid ​

<ITagsInput v-model="recipients" invalid aria-label="Recipients" />
<p class="text-red-500">One of those is not an email address.</p>

Inside an IFormField the invalid state, the id and the error's aria-describedby are inherited.

Props ​

Events ​

Slots ​

Accessibility ​

The name you give the field lands on the <input>, and each tag's delete control is named after the tag it removes — "Remove design". Arrow keys move between committed tags, and Backspace from an empty input selects the last one before removing it.

The field grows as tags wrap onto new lines rather than scrolling them out of sight.