🛑 Deprecation: This package is no longer receiving updates or support. We recommend that you transition to the use-bootstrap-tag, which provides similar functionality and is actively maintained.
Simple tag input for Bootstrap. Supports bootstrap v4 and v5.
Demo: https://tagin.netlify.app/
- Custom separators
- Enable/disable duplicates
- Custom transform
- Supports Bootstrap validation style
- Fast
- Small
- No dependencies
Install tagin with npm:
npm install taginInstall from cdn:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tagin.min.css">
<script src="https://unpkg.com/[email protected]/dist/tagin.min.js"></script>Place css between <head></head> tags:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tagin.min.css">
</head>Place js before </body> tag:
<body>
...
<script src="https://unpkg.com/[email protected]/dist/tagin.min.js"></script>
</body>- You can also use tagin as javascript module:
<script src="yourscript.js" type="module"></script>In yourscript.js file, import Tagin (Change location according to your path):
import Tagin from './path/to/tagin.module.js'Or you can use it directly in the html script as a module:
<script type="module">
import Tagin from './path/to/tagin.module.js'
</script><input type="text" name="tags" class="form-control tagin" value="red,green,blue">const options = {
separator: ',', // default: ','
duplicate: false, // default: false
enter: true, // default: false
transform: 'input => input.toUpperCase()', // default: input => input
placeholder: 'Add a group...' // default: ''
}
const tagin = new Tagin(document.querySelector('.tagin'), options)
tagin.addTag('yellow') // Add tag 'yellow'
tagin.addTag(['cyan', 'black']) // Add tags 'cyan' and 'black'
tagin.getTag() // Return tags as string red,green,blue,yellow,cyan,black
tagin.getTags() // Return tags as array ['red', 'green', 'blue', 'yellow', 'cyan', 'black']Using data-tagin-placeholder attribute:
<input type="text" name="tags" class="form-control tagin" value="red,green,blue" data-tagin-placeholder="Add a color... (then press comma)">Or using option:
const tagin = new Tagin(document.querySelector('.tagin'), {
placeholder: 'Add a color... (then press comma)'
})Example tags with 'space' separator.
Using data-tagin-separator attribute:
<input type="text" name="tags" class="form-control tagin" data-tagin-separator=" " value="red green blue">Or using option:
const tagin = new Tagin(document.querySelector('.tagin'), {
separator: ' '
})Add data-tagin-duplicate to remove duplicates validation.
<input type="text" name="tags" class="form-control tagin" data-tagin-duplicate value="html,html,css,css,js,js">Or using option:
const tagin = new Tagin(document.querySelector('.tagin'), {
duplicate: true
})Sometimes we need to transform tags.
Example tags with toUpperCase().
Using data-tagin-transform attribute:
<input type="text" name="tags" class="form-control tagin" data-tagin-transform="input => input.toUpperCase()" value="HTML,CSS">Or using option:
const tagin = new Tagin(document.querySelector('.tagin'), {
transform: 'input => input.toUpperCase()'
})Add data-tagin-enter to force adding tag when enter key is pressed.
<input type="text" name="tags" class="form-control tagin" data-tagin-enter value="red,green,blue" data-placeholder="Add a color... (then press comma or enter)">Or using option:
const tagin = new Tagin(document.querySelector('.tagin'), {
enter: true
})