A field that holds several short values: recipients, labels, skills.
Import it from rei-kit:
import { TagsInput } from 'rei-kit'
Open TagsInput in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { TagsInput } from 'rei-kit'
const tags = ref(['design'])
</script>
<template>
<TagsInput
v-model="tags"
label="Tags"
placeholder="Type and press Enter"
:remove-label="(tag) => `Remove ${tag}`"
:max="5"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | |
removeLabel | (tag: string) => string | yes | `(tag) => \`Remove ${tag}\`` — already translated. |
placeholder | string | '' | |
hint | string | '' | |
error | string | '' | |
max | number | undefined | How many tags at most. The field stops taking them at the limit. |
allowDuplicates | boolean | false | By default the same tag twice is ignored. |
size | 'sm' | 'md' | 'md' | |
labelHidden | boolean | false | |
disabled | boolean | false | |
fieldId | string | undefined | Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.