[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 is needed! Supports creating new tags.

How to make use of it:

1. Import Tags.js.

import Tags from "./tags.js";

2. Initialize the library.

Tags.init();

3. It will routinely convert all chosen 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 usage, please go to the official website.

Share