JavaScript Tags Input Library
Native JavaScript library to make Tags Input Element in DOM. There isn't any dependency for this library, add it straight in your project and you'r ready to go.
Install via npm
npm install vanilla-tags-input
Require in Node
let TagsInput = require('vanilla-tags-input')
Import Styles
@import '~vanilla-tags-input/tags-input.css'
##3 Alternatively, you can use a CDN or even download
<!-- Tags-input CSS -->
<link rel="stylesheet" href="https://unpkg.com/vanilla-tags-input/tags-input.css">
<!-- Tags-input JavaScript -->
<script src="https://unpkg.com/vanilla-tags-input"></script>
Usage
Selector is the only compulsory option to making this plugin work, and it accepts ID of input field you want to convert to tag input.
var tagInput1 = new TagsInput({
selector: 'tag-input1',
});
However there are few other options too like
- Duplicate - Set it to yes if you want to allow duplicate tags
- Max - Limit the maximum number of tags to be added in plugin
var tagInput1 = new TagsInput({
selector: 'tag-input1',
duplicate : false,
max : 10
});
Options
Add multiple tags programatically
tagInput1.addData(['PHP' , 'JavaScript' , 'CSS'])
// or add single one
tagInput1.addTag('React');
Check if there are any erros to add a tag
tagInpu1.anyErrors('another tag');
Destroy the instance and release the cached memory
tagInput1.destroy();
Reinitialize the plugin if previously destroyed
tagInput1.init()
// you can reinitialize options
tagInput1.init({
selector: 'other-tag-input',
duplicate : false,
max : 10
})
Method chaning available too
tagsInput1.init().addTag().addData().destroy().init()
License
MIT Copyright (c) 2018-present, Qamar Ali
For Learning Purposes
Here is a Demo on codepen
Find Tutorial on how i build this javascript library.
.png)
60 Nov 16, 2022
2.8k Jan 2, 2023
220 Nov 7, 2022
35 Aug 24, 2022
5 May 13, 2021
24 Nov 29, 2022
1 May 1, 2021
34 Dec 8, 2022
1.5k Dec 27, 2022
3 Oct 11, 2022