Skip to content
On this page

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
vue
<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.

PropDescriptionAccepted ValuesDefault
modelValueThe value for the elementstring[][]
placeholderPlaceholder for the tags inputString''
allowDuplicatesIf duplicate values should be allowedBooleanfalse
allowSymbolsIf symbols should be allowedBooleanfalse
allowedOptionsData list of the options that are allowedstring[][]
clearOnInvalidIf input should be cleared if invalidBooleantrue
transformValueA function to transform the value on inputFunction() => value
errorTagNotAllowedThe error message when tag is not allowedString...
errorTagDuplicatedThe error message when tag is duplicatedString...
errorTagInvalidThe error message when tag is invalidString...

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.

AttributeDescriptionType
optionThe actual option on the loopstring, number
classesList of classes to style the componentObject
disabledList of classes to style the componentBoolean
keydownCallback when the button is pressed or navigatedFunction
removeCallback to remove the tagFunction

Slot tagLabel

This slot lets you override the tag label

AttributeDescriptionType
optionThe actual option on the loopstring, number

Slot tagCloseIcon

This slot lets you override the tag close icon

AttributeDescriptionType
optionThe actual option on the loopstring, number

Slot errors

Slot that holds the error messages when the component errors prop is defined.

AttributeDescriptionType
errorsThe errors being injected[String, Array]
hasErrorsIf the field has errorsBoolean

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.

AttributeDescriptionType
errorsThe errors being injected[String, Array, Undefined]
feedbackThe feedback message[String, Undefined]

Events 🚇

Here you may find the events emitted by this component.

EventDescriptionValue
update:modelValueWhen the value changesany

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

js
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

js
this.$refs.tagsInput.remove('new tag')

// or
const tagsInput = ref(null)
tagsInput.value.remove('new tag')

Released under the MIT License.