Enzyme UI

# Tag input

TagInput component is used to provide simple stylish tag based input element. It is useful to use tag input as multiple select options element.

When user focuses tag input element, an input field will appear where user will be able to type. Once user hits enter, value from input element will be added to tag input internal data array and tags will be rendered.

# Simple usage

You can use v-model with TagInput to bind array variable which will be updated automatically once the content of tag input is changed by emitting input event with array of values.

Value of tag input:
[
  "Javascript",
  "C++",
  "Golang",
  "Python"
]

<TagInput v-model="tagInput"/> 
<script>
export default {
    data(){
        return {
            tagInput:['Javascript', 'C++', 'Golang', 'Python'],
        }
    }
}
</script>

# Customization

You can use all available theme colors to change the background color of tag element. Simply provide type property with one of theme color names

You can also provide infoText, placeholder and label props to add corresponding texts

A simple label
This is info text for default tag input
A simple label
This is info text for default tag input
A simple label
This is info text for secondary tag input
A simple label
This is info text for info tag input
A simple label
This is info text for success tag input
A simple label
This is info text for default tag input
A simple label
This is info text for default tag input
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="default" info-text="This is info text for default tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="primary" info-text="This is info text for default tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="secondary" info-text="This is info text for secondary tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="info" info-text="This is info text for info tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="success" info-text="This is info text for success tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="warning" info-text="This is info text for default tag input" label="A simple label"/> 
<TagInput class="mt-4" v-model="tagInput"  placeholder="Type something and hit enter" type="danger" info-text="This is info text for default tag input" label="A simple label"/> 
<script>
export default {
    data(){
        return {
            tagInput:['Javascript', 'C++', 'Golang', 'Python'],
        }
    }
}
</script>

# Props

name default description required type
value Initial value of tags used for v-model false Array
type primary One of default theme types that will be used to apply color and background styles. Available types are: default, primary, secondary, success, info, warning, danger, light, dark false String
placeholder Simply the placeholder for input false String
infoText Info message String
label Label text String

← Toast Notifications →