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.
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 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>
</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">
Tips
- 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
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
| Name | Type | Description |
|---|---|---|
| allowNew | Boolean | Allows creation of new tags |
| showAllSuggestions | Boolean | Show all suggestions even if they don’t match. Disables validation. |
| badgeStyle | String | Color of the badge (color can be configured per option as well) |
| allowClear | Boolean | Show a clear icon |
| clearEnd | Boolean | Place a clear icon at the end |
| selected | Array | String | A comma-separated list of selected values |
| regex | String | Regex for new tags |
| separator | Array | String | A list (pipe separated) of characters that should act as separators (default is using enter key) |
| max | Number | Limit to a maximum of tags (0 = no limit) |
| placeholder | String | Provides a placeholder if none are provided as the first empty option |
| clearLabel | String | Text as a clear tooltip |
| searchLabel | String | Default placeholder |
| keepOpen | Boolean | Keep suggestions open after selection, clear on focus out |
| allowSame | Boolean | Allow the same tags used multiple times |
| baseClass | String | Customize the class applied to badges |
| addOnBlur | Boolean | Add new tags on blur (only if allowNew is enabled) |
| showDisabled | Boolean | Show disabled tags |
| hideNativeValidation | Boolean | Hide native validation tooltips |
| suggestionsThreshold | Number | Number of chars required to show suggestions |
| maximumItems | Number | Maximum number of items to display |
| autoselectFirst | Boolean | Always select the first item |
| updateOnSelect | Boolean | Update input value on selection (doesn’t play nice with autoselectFirst) |
| highlightTyped | Boolean | Highlight matched part of the suggestion |
| fullWidth | Boolean | Match the width on the input field |
| fixed | Boolean | Use fixed positioning (solve overflow issues) |
| activeClasses | Array | By default: [“bg-primary”, “text-white”] |
| labelField | String | The key to the label |
| valueField | String | The key to the value |
| queryParam | String | Name of the param passed to endpoint (query by default) |
| server | String | Endpoint for the data provider |
| serverMethod | String | HTTP request method for the data provider, default is GET |
| serverParams | String | Object | Parameters to pass along to the server |
| liveServer | Boolean | Should the endpoint be called each time on input |
| noCache | Boolean | Prevent caching by appending a timestamp |
| debounceTime | Number | Debounce the time for the live server |
| notFoundMessage | String | Display a no suggestions found message. Leave empty to disable |
| onRenderItem | function | Callback function that returns the suggestion |
| onSelectItem | function | Callback function to call on selection |
| onClearItem | function | Callback function to call on clear |
| onServerResponse | function | Callback 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.
