Press "Enter" to skip to content

[Multiple] Replace Select With The Nices Icons | Bootstrap5-Tags

bootstrap5-tags is a Vanilla JavaScript (ES6) extension for Bootstrap 5 that turns a multi-select box into an easy-to-use tag-input component. An original ES6 alternative to choose from with the standard Bootstrap 5 patterns. No additional CSS needed! Supports creating new tags.

bootstrap tags input bootstrap, bootstrap tags input codepen, bootstrap tags input jsfiddle, bootstrap tags input validation, bootstrap tags inputselect multiple

How to make use of it:

1. Import the Tags.js.

import Tags from "./tags.js";

2. Initialize the library.

Tags.init();

3. It will routinely convert all choose packing containers with the multi attribute right into tagsΒ input the place you possibly can choose choices from a suggestion listing whereas typing.

<label for="validationTags" class="form-label">Tags</label>
<select class="form-select" id="validationTags" multiple>
    <option selected disabled hidden value="">Choose a tag...</option>
    <option value="1" selected="selected">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>

4. Add the data-allow-new="true" to the chosen field in circumstances where you need to add new options.

<select class="form-select" id="validationTags" multiple data-allow-new="true">

Easy Tags Input Component For Bootstrap 5, bootstrap5-tags Plugin/Github


See Demo And Download


Official Website(lekoala): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *