An ES6 native replacement for select using standards Bootstrap 5 (and 4) styles.

(almost) 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 instances

By 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>

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!

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>

You can pass additionnal parameters with data-server-params and choose the method with data-server-method (GET or POST).

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

To know more about these features, check the demo!

• You can also use it on single selects! :-)
• Use arrow down to show dropdown
• 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)

While styling is not mandatory, some pseudo styles may help align your styles with a regular bootstrap form-control We basically replicate input state as pseudo classes on the form-control container

• 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

These styles can be found in _tags.scss

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

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

https://codepen.io/lekoalabe/pen/ExWYEqx

You can use Modular Behaviour

https://codepen.io/lekoalabe/pen/wvmBLoB

Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.

• Bootstrap5 autocomplete: the autocomplete input for bootstrap 5 (and more!)
• BS Companion: the perfect bootstrap companion
• Admini: the minimalistic bootstrap 5 admin panel