[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.

Although the design is not mandatory, some false patterns may help:

  • Support focus styles by implementing a pseudo-class form-control-focus
  • Support improved floating labels by implementing a pseudo-class form-placeholder-shown
  • Support disabled styles by implementing a pseudo-class form-control-disabled

Without bootstrap 5

Bootstrap 4 Support

Even if the initial idea of Bootstrap 4 is not, this component is now compatible with Bootstrap 4 because it only requires the minimum changes.

Standalone usage

It is clear that this package works wonderfully with the full Bootstrap.

In fact, this library is not used even the JS library to put the drop-down menu, so its only dependencies are on CSS chapters. You can check the .SCSS file to learn how to reduce Bootstrap 5 CSS to a smaller size.

Must Read: Simple and Easy HTML Tags Input for Bootstrap 4 | Tagin

How to make use of it:

1. Import Tags.js.

import Tags from "./tags.js";

2. Initialize the library.


3. It will routinely convert all chosen packing containers with the multi attribute right into tags input the place you possibly can choose options 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>
<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">


  • You can also use it on one selection! 🙂
  • Use the arrow down to show the drop-down menu (and an arrow up to hide it)
  • If you have a really long list of options, the scroll bar will be used
  • Approximately access signs on a specific element with tags.getInstance(mySelect)


Options can be either passed to the constructor (eg: optionName) or in data-option-name format.

Must Read: Magically and Customizable jQuery Tags Input Plugin | TagsInput

allowNewBooleanAllows creation of new tags
showAllSuggestionsBooleanShow all suggestions even if they don’t match. Disables validation.
badgeStyleStringColor of the badge (color can be configured per option as well)
allowClearBooleanShow a clear icon
clearEndBooleanPlace a clear icon at the end
selectedArray | StringA comma-separated list of selected values
regexStringRegex for new tags
separatorArray | StringA list (pipe separated) of characters that should act as separators (default is using enter key)
maxNumberLimit to a maximum of tags (0 = no limit)
placeholderStringProvides a placeholder if none are provided as the first empty option
clearLabelStringText as a clear tooltip
searchLabelStringDefault placeholder
keepOpenBooleanKeep suggestions open after selection, clear on focus out
allowSameBooleanAllow the same tags used multiple times
baseClassStringCustomize the class applied to badges
addOnBlurBooleanAdd new tags on blur (only if allowNew is enabled)
showDisabledBooleanShow disabled tags
hideNativeValidationBooleanHide native validation tooltips
suggestionsThresholdNumberNumber of chars required to show suggestions
maximumItemsNumberMaximum number of items to display
autoselectFirstBooleanAlways select the first item
updateOnSelectBooleanUpdate input value on selection (doesn’t play nice with autoselectFirst)
highlightTypedBooleanHighlight matched part of the suggestion
fullWidthBooleanMatch the width on the input field
fixedBooleanUse fixed positioning (solve overflow issues)
activeClassesArrayBy default: [“bg-primary”, “text-white”]
labelFieldStringThe key to the label
valueFieldStringThe key to the value
queryParamStringName of the param passed to endpoint (query by default)
serverStringEndpoint for the data provider
serverMethodStringHTTP request method for the data provider, default is GET
serverParamsString | ObjectParameters to pass along to the server
liveServerBooleanShould the endpoint be called each time on input
noCacheBooleanPrevent caching by appending a timestamp
debounceTimeNumberDebounce the time for the live server
notFoundMessageStringDisplay a no suggestions found message. Leave empty to disable
onRenderItemfunctionCallback function that returns the suggestion
onSelectItemfunctionCallback function to call on selection
onClearItemfunctionCallback function to call on clear
onServerResponsefunctionCallback function to process server response. Must return a Promise

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.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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