Features Installation Usage/Examples Options Methods

Tagin

v2.0.2

Simple tag input for Bootstrap

Github

Features

Installation

Install tagin with npm:

npm install tagin

Install from cdn:

<link rel="stylesheet" href="https://unpkg.com/tagin@2.0.2/dist/tagin.min.css">
<script src="https://unpkg.com/tagin@2.0.2/dist/tagin.min.js"></script>

Usage/Examples

Place css between <head></head> tags:

<head>
	<link rel="stylesheet" href="https://unpkg.com/tagin@2.0.2/dist/tagin.min.css">
</head>

Place js before </body> tag:

<body>
	...
	<script src="https://unpkg.com/tagin@2.0.2/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>

Examples:

1. Basic Usage (No data-options attribute needed):
redgreenblue
<input type="text" name="tags" class="form-control tagin" value="red,green,blue">

<script>
	new Tagin(document.querySelector('.tagin'))
</script>
2. Using Placeholder
redgreenblue
<!-- 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: -->
<script>
	const tagin = new Tagin(document.querySelector('.tagin'), {
		placeholder: 'Add a color... (then press comma)'
	})
</script>
3. Using Custom Separator

Example tags with 'space' separator.

redgreenblue
<!-- Using data-tagin-separator attribute: -->
<input type="text" name="tags" class="form-control tagin" data-tagin-separator=" " value="red green blue">

<!-- Or using option: -->
<script>
	const tagin = new Tagin(document.querySelector('.tagin'), {
		separator: ' '
	})
</script>
4. Allow Duplicates
htmlhtmlcsscssjsjs
<!-- 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: -->
<script>
	const tagin = new Tagin(document.querySelector('.tagin'), {
		duplicate: true
	})
</script>
5. Transform Tags

Sometimes we need to transform tags. Example tags with toUpperCase().

HTMLCSS
<!-- 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: -->
<script>
	const tagin = new Tagin(document.querySelector('.tagin'), {
		transform: 'input => input.toUpperCase()'
	})
</script>
6. Force Add on Enter
redgreenblue
redgreenblue
<!-- 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-tagin-placeholder="Add a color... (then press comma or enter)">

<!-- Or using option: -->
<script>
	const tagin = new Tagin(document.querySelector('.tagin'), {
		enter: true
	})
</script>
7. Add Tags Programmatically

Tagin provides addTag method to add tags programmatically.

redgreenblue
<input type="text" name="tags" class="form-control tagin" value="red,green,blue">

<button class="btn btn-secondary btn-sm" id="add1" type="button">Add yellow</button>
<button class="btn btn-secondary btn-sm" id="add2" type="button">Add cyan & black</button>

<script>
	const tagin = new Tagin(document.querySelector('.tagin'))

	document.getElementById('add1').addEventListener('click', function () {
		tagin.addTag('yellow')
		this.remove()
	})

	document.getElementById('add2').addEventListener('click', function () {
		tagin.addTag(['cyan', 'black'])
		this.remove()
	})
</script>
8. Get the value

To get the value, Tagin provides the getTag method to get the string value with its separator, and the getTags method to get the value as an array.

redgreenblue

								

								

									
<input type="text" name="tags" class="form-control tagin" value="red,green,blue">
<button class="btn btn-outline-secondary mt-4 btn-sm" id="get" type="button">Get the value</button>

<script>
	const tagin = new Tagin(document.querySelector('.tagin'))

	document.getElementById('get').addEventListener('click', function () {
		console.log(tagin.getTag()) // red,green,blue
		console.log(tagin.getTags()) // ["red","green","blue"]
	})
</script>


								

							

						

					

        


        

          
9. Validation

					

						

							
						

						

							

								

									

										

										
Ok

										
Required

										
									

								

								

									
<form class="needs-validation" novalidate>
	<input type="text" name="tags" class="form-control tagin" required>
	<div class="valid-feedback">Ok</div>
	<div class="invalid-feedback">Required</div>
	<button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>

<script>
	new Tagin(document.querySelector('.tagin'))

	// Example starter JavaScript for disabling form submissions if there are invalid fields
	void (function () {
		document.querySelectorAll('.needs-validation').forEach(form => {
			form.addEventListener('submit', event => {
				if (!form.checkValidity()) {
					event.preventDefault()
					event.stopPropagation()
				}

				form.classList.add('was-validated')
			})
		})
	})()
</script>


								

							

						

					

        


      


			
Options

			

				

					
						

							Name
							Type
							Default
							Description
						

					
					
						

							separator
							string
							,
							Separator between tags
						

						

							placeholder
							string
							
							Short hint in the input field before the user enters a value
						

						

							duplicate
							boolean
							false
							Allow duplicates
						

						

							transform
							string
							input => input
							Function to change value. The function must be an arrow function
						

						

							enter
							boolean
							false
							Force adding tag when enter key is pressed
						

					
				

			


			
Methods

			

				

					
						

							Name
							Params
							Returns
							Example
						

					
					
						

							addTag
							string | array
							void
							
								
tagin.addTag('yellow')
tagin.addTag('black,white')
tagin.addTag(['black', 'white'])

									
						

						

							getTag
							null
							string
							
								
tagin.getTag()

									
						

						

							getTags
							null
							array
							
								
tagin.getTags()