Tags Input #
A input to spit out some tags, with batteries included!
Preview & Playground 🖼️ #
Here you may find a preview of the component, with error & possible variants.
🏄 Click to expand the code
<script setup lang="ts">
import { TagsInput } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref(['Apple', 'Windows', 'Linux'])
const value2 = ref([])
const value3 = ref([])
const value4 = ref(['Vue', 'Or Vue', 'Or Svelt'])
const value5 = ref(['Vue Reactivity System', 'React Reactivity System', 'Svelt Reactivity System'])
const value6 = ref([])
const allowedList = ref(['Bananas', 'Apples', 'Oranges', 'Pears'])
</script>
<template>
<PreviewWrapper>
<div class="grid space-y-2">
<TagsInput
v-model="value"
placeholder="Write new tags here"
feedback="Plain & Simple Example"
/>
<TagsInput
v-model="value2"
placeholder="Write new tags here"
feedback="You can add SVGs as addons before & After"
:allow-symbols="false"
:transform-value="(givenValue: string) => givenValue.toLowerCase()"
errors="You can also provide your own errors"
/>
<TagsInput
v-model="value3"
placeholder="Write new tags here"
:feedback="`This field should only allow the following: ${allowedList.join(', ')}`"
:allowed-options="allowedList"
/>
<TagsInput
v-model="value4"
placeholder="Write new tags here"
feedback="This should be disabled"
:disabled="true"
/>
<TagsInput
v-model="value6"
placeholder="Write new tags here"
feedback="On this example all variables for the v-model will be transformed to upper-case and a emoji will be added at the end"
:transform-value="(givenValue: string) => `${givenValue.toUpperCase()}👻`"
/>
</div>
</PreviewWrapper>
</template>
Props 📥 #
Props available for this component extending the default variant & global props.
Prop | Description | Accepted Values | Default |
---|---|---|---|
modelValue | The value for the element | string[] | [] |
placeholder | Placeholder for the tags input | String | '' |
allowDuplicates | If duplicate values should be allowed | Boolean | false |
allowSymbols | If symbols should be allowed | Boolean | false |
allowedOptions | Data list of the options that are allowed | string[] | [] |
clearOnInvalid | If input should be cleared if invalid | Boolean | true |
transformValue | A function to transform the value on input | Function | () => value |
errorTagNotAllowed | The error message when tag is not allowed | String | ... |
errorTagDuplicated | The error message when tag is duplicated | String | ... |
errorTagInvalid | The error message when tag is invalid | String | ... |
Slots 🧬 #
Current slots available for this component are the following:
By default all slots get all the props and configuration from the component.
Slot tag
#
This slot lets you override the tag element, you can use this to add icons or other elements.
Attribute | Description | Type |
---|---|---|
option | The actual option on the loop | string , number |
classes | List of classes to style the component | Object |
disabled | List of classes to style the component | Boolean |
keydown | Callback when the button is pressed or navigated | Function |
remove | Callback to remove the tag | Function |
Slot tagLabel
#
This slot lets you override the tag label
Attribute | Description | Type |
---|---|---|
option | The actual option on the loop | string , number |
Slot tagCloseIcon
#
This slot lets you override the tag close icon
Attribute | Description | Type |
---|---|---|
option | The actual option on the loop | string , number |
Slot errors
#
Slot that holds the error messages when the component errors
prop is defined.
Attribute | Description | Type |
---|---|---|
errors | The errors being injected | [String, Array] |
hasErrors | If the field has errors | Boolean |
Slot feedback
#
Slot that holds the feedback messages when the component feedback
prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.
Attribute | Description | Type |
---|---|---|
errors | The errors being injected | [String, Array, Undefined] |
feedback | The feedback message | [String, Undefined] |
Events 🚇 #
Here you may find the events emitted by this component.
Event | Description | Value |
---|---|---|
update:modelValue | When the value changes | any |
Methods Exposed 🏄 #
Here you may find the list of the methods/functions exposed by the component.
Expose add
#
Lets you add a new tag into the component
this.$refs.tagsInput.add('new tag')
// or
const tagsInput = ref(null)
tagsInput.value.add('new tag')
Expose remove
#
Lets you remove a new tag into the component
this.$refs.tagsInput.remove('new tag')
// or
const tagsInput = ref(null)
tagsInput.value.remove('new tag')