An input component that allows users to add and manage multiple tags. Tags can be added with Enter, comma, or custom delimiters, and removed individually or all at once.
Component Features
- ⌨️ Keyboard Input: Supports adding tags with Enter, comma, or custom delimiters.
- 📏 Multiple Sizes: Supports
xs, sm, default, lg, xl, 2xl size specs.
- ❌ Disabled/Readonly/Loading: Supports
disabled, loading, readonly props.
- 🔢 Max Tags: Limits the maximum number of tags via
max prop.
- ✖️ Clearable: Supports clearing all tags via
clearable prop.
- 📝 Form Integration: Integrates with
BrFormField, vee-validate, and zod for validation.
- 🌗 Dark Mode: Based on
BrConfigProvider for automatic dark mode adaptation.
Basic
Use v-model to bind an array of strings. Press Enter or comma to add a new tag. Press Backspace to remove the last tag.
<script setup>
import { ref } from 'vue'
const tags = ref(['Vue', 'React'])
</script>
<template>
<div class="space-y-2">
<BrTagsInput v-model="tags" placeholder="输入标签后按 Enter 添加..." />
<p class="text-xs text-muted-foreground">当前标签: {{ tags }}</p>
</div>
</template>
Sizes
The Tags Input component supports multiple sizes: xs, sm, default, md, lg, xl, and 2xl.
<template>
<div class="space-y-2">
<BrTagsInput size="xs" placeholder="Extra Small" />
<BrTagsInput size="sm" placeholder="Small" />
<BrTagsInput size="default" placeholder="Default" />
<BrTagsInput size="lg" placeholder="Large" />
<BrTagsInput size="xl" placeholder="Extra Large" />
<BrTagsInput size="2xl" placeholder="2 Extra Large" />
</div>
</template>
Disabled, Loading & Readonly
Use disabled, loading, or readonly to control the interactive state of the component.
<script setup>
import { ref } from 'vue'
const tags = ref(['标签一', '标签二'])
</script>
<template>
<div class="space-y-2">
<BrTagsInput v-model="tags" disabled placeholder="禁用状态" />
<BrTagsInput v-model="tags" loading placeholder="加载中状态" />
<BrTagsInput v-model="tags" readonly placeholder="只读状态" />
</div>
</template>
Use the max prop to limit the number of tags that can be added.
<script setup>
import { ref } from 'vue'
const tags = ref(['Vue'])
</script>
<template>
<div class="space-y-2">
<BrTagsInput v-model="tags" :max="5" placeholder="最多添加 5 个标签" />
<p class="text-xs text-muted-foreground">已添加 {{ tags.length }}/5 个标签</p>
</div>
</template>
Clearable
Use the clearable prop to show a clear button that removes all tags at once.
<script setup>
import { ref } from 'vue'
const tags = ref(['JavaScript', 'TypeScript', 'Vue'])
</script>
<template>
<div class="space-y-2">
<BrTagsInput v-model="tags" clearable placeholder="可清除标签输入框" />
</div>
</template>
Integrate with vee-validate and zod for form validation. The component works seamlessly with BrFormItem for automatic error state detection.
<script setup>
import { ref } from 'vue'
import { useForm } from 'vee-validate'
import { z } from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
const schema = toTypedSchema(z.object({
tags: z.array(z.string()).min(1, '请至少添加一个标签').max(5, '最多添加 5 个标签'),
}))
const { handleSubmit } = useForm({
validationSchema: schema,
initialValues: {
tags: [],
},
})
const onSubmit = handleSubmit((formValues) => {
alert(`提交成功! 标签: ${formValues.tags.join(', ')}`)
})
</script>
<template>
<form @submit="onSubmit" class="space-y-4 max-w-md">
<BrFormField name="tags" label="技能标签" required>
<BrTagsInput name="tags" placeholder="输入技能后按 Enter 添加..." clearable />
</BrFormField>
<BrButton type="submit">提交</BrButton>
</form>
</template>
Theming
You can customize the appearance of the tags input using Tailwind CSS classes or by overriding the CSS variables in your global CSS.
CSS Variables
:root {
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
Tailwind Customization
You can also use class prop to add custom styles:
<BrTagsInput class="border-blue-500 focus-within:ring-blue-500" />
API
Props
Slots
Events