Tags for Bootstrap 4/5
How to use
An ES6 native replacement for select using standards Bootstrap 5 (and 4) styles.
No additional CSS needed! Supports creation of new tags.
import Tags from "./tags.js";
Tags.init();
// Tags.init(selector, opts);
// You can pass global settings in opts that will apply
// to all Tags instancesBy default, only provided options are available. Validation error will be displayed in case of invalid tag.
<label for="tags-input" class="form-label">Tags</label>
<select class="form-select" id="tags-input" name="tags[]" multiple>
<option 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>Creation of new tags
Use attribute data-allow-new to allow creation of new tags. Their
default value will be equal to the text. Since you can enter
arbitrary text, no validation will occur.
<select class="form-select" id="tags-input" name="tags[]" multiple data-allow-new="true"></select>You can force these new tags to respect a given regex.
NOTE: don't forget the [] if you need multiple values!
Server side support
You can also use options provided by the server. This script expects a json response that is an array or an object with the data key containing an array.
Simply set data-server where your endpoint is located. It should provide an array of value/label objects. The suggestions will be populated upon init
except if data-live-server is set, in which case, it will be populated on type. A ?query= parameter is passed along with the current value of the searchInput.
You can preselect values either by using data-selected or by marking the suggestion as selected in the json result.
<label for="validationTagsJson" class="form-label">Tags (server side)</label>
<select
class="form-select"
id="validationTagsJson"
name="tags_json[]"
multiple
data-allow-new="true"
data-server="demo.json"
data-live-server="1"
>
<option disabled hidden value="">Choose a tag...</option>
</select>Options
Options can be either passed to the constructor (eg: optionName) or in data-option-name format.
| Name | Default | Description |
|---|---|---|
| allowNew | false | Allow typing arbitrary new tags |
| showAllSuggestions | false | Show all suggestions even if they don't match. Disables validation. |
| badgeStyle | primary | Color of the badge (color can be configured per option as well) |
| allowClear | false | Show a clear icon |
| clearEnd | false | Place clear icon at the end |
| server | '' | Point to a given endpoint that should provide the list of suggestions |
| liveServer | false | Should the endpoint be called dynamically when typing |
| serverParams | {} | Additionnal params to pass alongside the query parameter |
| selected | '' | A comma separated list of selected values |
| suggestionsThreshold | 1 | How many chars are needed before showing suggestions (0 to open immediately) |
| validationRegex | false | Regex for new tags |
| separator | '' | A list (pipe separated) of characters that should act as separator (default is using enter key) |
| max | false | Limit to a maximum of tags |
| placeholder | '' | Provides a placeholder if none are provided as the first empty option |
| clearLabel | 'Clear' | Text as clear tooltip |
| searchLabel | 'Type a value' | Default placeholder |
| valueField | 'value' | Value field |
| labelField | 'label' | Label field |
| keepOpen | false | Keep suggestions open after selection, clear on focus out |
| fullWidth | false | Use full input width from the dropdown menu |
| debounceTime | 300 | Debounce live server calls |
| baseClass | '' | Customize the class applied to badges |
Tips
- You can also use it on single selects! :-)
- Use arrow down to show dropdown (and arrow up to hide it)
- If you have a really long list of options, a scrollbar will be used
- Access Tags instance on a given element with Tags.getInstance(mySelect)
Without Bootstrap 5
Bootstrap 4 support
Even if it was not the initial idea to support Bootstrap 4, this component is now compatible with Bootstrap 4 because it only requires minimal changes.
Check out demo-bs4.html
Standalone usage
Obviously, this package works great with the full bootstrap library, but you can also use it without Bootstrap or with a trimmed down version of it
Actually, this library doesn't even use the js library to position the dropdown menu, so its only dependencies is on css classes. You can check out the .scss file to see how to reduce bootstrap 5 css to a smaller size.
Check out demo-standalone.html
Demo
https://codepen.io/lekoalabe/pen/ExWYEqx
How does it look ?
Do you need to init this automagically ?
You can use Modular Behaviour
https://codepen.io/lekoalabe/pen/wvmBLoB
Browser supports
Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.
Used in
- Admini: the minimalistic bootstrap 5 admin panel