Vanilla JS Tags Input For Bootstrap 5/4 – Tagin

Tagin is a simple, pure JavaScript tags input plugin based on the Bootstrap 5 or Bootstrap 4 stylesheet.

Features:

• Allows you to insert multiple tags using comma.
• Or using a custom separator like Space, semicolon, etc.
• Checks if the tag is duplicate.
• Allows you to transform tags.

How to use it:

1. Load the latest Bootstrap 5 or Bootstrap 4 stylesheet for the tags input.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Load the Tagin plugin’s files.

<link rel="stylesheet" href="css/tagin.min.css" />
<script src="js/tagin.min.js"></script>

3. Create a tags input field and specify a list of pre-defined tags separated with comma.

<input type="text" name="tags" class="form-control tagin" value="css,script,com" />

4. Initialize the Tagin and done.

for (const el of document.querySelectorAll('.tagin')) {
tagin(el)
}

5. Add a placeholder to the tags input.

<input type="text" name="tags" class="form-control tagin" value="css,script,com" data-placeholder="Type Tags Here" />

6. Customize the separator. Defaults to comma (,).

<input type="text" name="tags" class="form-control tagin" value="css script com" data-separator=" " />

7. Determine whether to check the duplicate tag.

<input type="text" name="tags" class="form-control tagin" value="css,script,com,css,script,com" data-duplicate="true" />

8. Transform the typed tags using the data-transform attribute:

<input type="text" name="tags" class="form-control tagin" value="CSS,Script,Com" data-transform="input => input.toUpperCase()" />

Changelog:

v1.3.0 (05/23/2021)

• Support bootstrap v5
• Fix paste string with tag separator not splitting

v1.2.0 (11/03/2020)

• Update to bootstrap v4.5.3
• Add tag on blur

The post Vanilla JS Tags Input For Bootstrap 5/4 – Tagin appeared first on CSS Script.