bootstrap5-tags

    1.1.4 • Public • Published

    bootstrap5-tags

    NPM Downloads

    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();

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

    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!

    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 ?

    screenshot

    I need more

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

    Install

    npm i bootstrap5-tags

    DownloadsWeekly Downloads

    116

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    45.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • lekoala