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:



			

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):

								
2. Using Placeholder

								
3. Using Custom Separator

Example tags with 'space' separator.


								
4. Allow Duplicates

								
5. Transform Tags

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


								
6. Force Add on Enter

								
7. Add Tags Programmatically

Tagin provides addTag method to add tags programmatically.


								
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.


								

								
9. Validation
Ok
Required

								

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()