Usage
Use the v-model directive to control the value of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PInputTags :default-value="['Vue']" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<PInputTags placeholder="Enter tags..." />
</template>
Max Length
Use the max-length prop to set the maximum number of characters allowed in a tag.
<template>
<PInputTags :max-length="4" />
</template>
Color
Use the color prop to change the ring color when the InputTags is focused.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" color="neutral" highlight />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variants
Use the variant prop to change the appearance of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" variant="subtle" color="neutral" />
</template>
Sizes
Use the size prop to adjust the size of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" size="xl" />
</template>
Icon
Use the icon prop to show an Icon inside the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" icon="i-lucide:search" size="md" variant="outline" />
</template>
leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.Avatar
Use the avatar prop to show an Avatar inside the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags
v-model="value"
:avatar="{
src: 'https://github.com/vuejs.png'
}"
size="md"
variant="outline"
/>
</template>
Delete Icon
Use the delete-icon prop to customize the delete Icon in the tags. Defaults to i-lucide:x.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" delete-icon="i-lucide:trash" />
</template>
Loading
Use the loading prop to show a loading icon on the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" loading />
</template>
Loading Icon
Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" loading loading-icon="i-lucide:loader" />
</template>
Disabled
Use the disabled prop to disable the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" disabled />
</template>
Examples
Within a FormField
You can use the InputTags within a FormField component to display a label, help text, required indicator, etc.
<script setup lang="ts">
import { ref } from 'vue';
const tags = ref(['Vue']);
</script>
<template>
<PFormField
label="Tags"
required
>
<PInputTags
v-model="tags"
placeholder="Enter tags..."
/>
</PFormField>
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
inputRef | Ref<HTMLInputElement | null> |
Theme
Below is the theme configuration skeleton for the PInputTags. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
inputTags: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
item: '',
itemText: '',
itemDelete: '',
itemDeleteIcon: '',
input: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
inputTags: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
item: '',
itemText: '',
itemDelete: '',
itemDeleteIcon: '',
input: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.