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.

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')

Tags Input #

Preview & Playground 🖼️ #

Props 📥 #

Slots 🧬 #

Slot tag #

Slot tagLabel #

Slot tagCloseIcon #

Slot errors #

Slot feedback #

Events 🚇 #

Methods Exposed 🏄 #

Expose add #

Expose remove #