# 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.
[
"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
<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 |