bootstrap5-tags

How to use

An ES6 native replacement for select using standards Bootstrap 5 styles.

No additional CSS needed! Supports creation of new tags.

import Tags from "./tags.js";
Tags.init();
// Tags.init(selector, opts);

By default, only provided options are available. Validation error will be displayed in case of invalid tag.

<label for="validationTags" class="form-label">Tags</label>
<select class="form-select" id="validationTags" 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="validationTags" name="tags[]" multiple data-allow-new="true">

Use attribute data-show-all-suggestions in order to show an unfiltered list of options. Only the first matching value is selected.

<select class="form-select" id="validationTags" name="tags[]" multiple data-show-all-suggestions="true">

Use attribute data-allow-clear in order to add a cross to remove items.

<select class="form-select" id="validationTags" name="tags[]" multiple data-allow-clear="true">

Use attribute data-suggestions-threshold to determine how many characters need to be typed to show the dropdown (defaults to 1).

<select class="form-select" id="validationTags" name="tags[]" multiple data-suggestions-threshold="0">

NOTE: don't forget the [] if you need multiple values!

Accessibility

You can set accessibility labels when passing options:

clearLabel ("Clear" by default)
searchLabel ("Type a value" by default)

Tips

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

Demo

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

How does it look ?

I need more

Maybe you can have a look at https://github.com/Honatas/multi-select-webcomponent

ludo / bootstrap5-tags