Tagin

v2.0.0

Simple tag input for Bootstrap

Features

Custom separators
Enable/disable duplicates
Custom transform
Supports Bootstrap validation style
Fast
Small
No dependencies

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.0/dist/tagin.min.css">
</head>

Place js before </body> tag:

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

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