Simple and Easy HTML Tags Input for Bootstrap 4 | Tagin

HTML-Tags-Input-for-Bootstrap-4-Tagin

Tagin plugin provides a Twitter Bootstrap user interface for tags management. Tagin is a simple and pure JavaScript tag insertion plugin based on the Bootstrap 4 stylesheet.

html tags input bootstrap, input dropdown type in html, input tag attributes, input box html

Features:

  • Custom separator
  • Enable/disable duplicates
  • Custom transform
  • Fast
  • Small
  • No dependencies

How to make use of it:

1. Load the most recent 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 tags input subject and specify a listing of pre-defined tags separated with a comma.

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

4. Initialize the Tagin and executed it.

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=" " data-placeholder="Type Tags Here" />

6. Customize the separator. Defaults to a comma.

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

7. Determine whether or not to verify the duplicate tag.

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

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

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

Bootstrap Tags Input, Bootstrap Tags Inputbootstrap tags input autocomplete, Tagin Plugin/Github


See Demo And Download

Official Website(erwinheldy): Click Here

This superior jQuery/javascript plugin is developed by erwinheldy. For extra Advanced usage, please go to the official website.

Share