PHPackages liquidedge-app/bootstrap5-tags - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. liquidedge-app/bootstrap5-tags ActiveLibrary[Utility & Helpers](/categories/utility) liquidedge-app/bootstrap5-tags ============================== An Bootstrap 5 icon picker library 1.0.2(2y ago)01781HTML Since Apr 26Pushed 2y agoCompare [ Source](https://github.com/ryno-liquidedge/bootstrap5-tags)[ Packagist](https://packagist.org/packages/liquidedge-app/bootstrap5-tags)[ GitHub Sponsors](https://github.com/lekoala)[ RSS](/packages/liquidedge-app-bootstrap5-tags/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)DependenciesVersions (4)Used By (0) Tags for Bootstrap 4/5 ====================== [](#tags-for-bootstrap-45) [![NPM](https://camo.githubusercontent.com/2c650f9600da98959dd5fcb7d3308824f2aaf8920ec29c27edb0c4c797891371/68747470733a2f2f6e6f6465692e636f2f6e706d2f626f6f747374726170352d746167732e706e673f6d696e693d74727565)](https://nodei.co/npm/bootstrap5-tags/)[![Downloads](https://camo.githubusercontent.com/780bfbcf3d2c83110ccf62bdabc22ba0ad65af39872a0103f05eee5ebe74e1d0/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f626f6f747374726170352d746167732e737667)](https://www.npmjs.com/package/bootstrap5-tags) How to use ---------- [](#how-to-use) 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. ``` Tags Choose a tag... Apple Banana Orange Please select a valid tag. ``` Creation of new tags -------------------- [](#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. ``` ``` You can force these new tags to respect a given regex. *NOTE: don't forget the \[\] if you need multiple values!* Server side support ------------------- [](#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. ``` Tags (server side) Choose a tag... ``` You can pass additionnal parameters with `data-server-params` and choose the method with `data-server-method` (GET or POST). Setting data programmatically ----------------------------- [](#setting-data-programmatically) You can use the `items` config key to pass options. These will be added to the select object. Items can be an array of Suggestions, or a key:value object. You can also call `setData` manually. Options ------- [](#options) Options can be either passed to the constructor (eg: optionName) or in data-option-name format. You can also use the `data-config` attribute with a json encoded string. NameTypeDescriptionitems`Array.`Source itemsallowNew`Boolean`Allows creation of new tagsshowAllSuggestions`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 iconclearEnd`Boolean`Place clear icon at the endselected`Array`A list of initially selected valuesregex`String`Regex for new tagsseparator`Array` | `String`A list (pipe separated) of characters that should act as separator (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 optionclearLabel`String`Text as clear tooltipsearchLabel`String`Default placeholdershowDropIcon`Boolean`Show dropdown iconkeepOpen`Boolean`Keep suggestions open after selection, clear on focus outallowSame`Boolean`Allow same tags used multiple timesbaseClass`String`Customize the class applied to badgesaddOnBlur`Boolean`Add new tags on blur (only if allowNew is enabled)showDisabled`Boolean`Show disabled tagshideNativeValidation`Boolean`Hide native validation tooltipssuggestionsThreshold`Number`Number of chars required to show suggestionsmaximumItems`Number`Maximum number of items to displayautoselectFirst`Boolean`Always select the first itemupdateOnSelect`Boolean`Update input value on selection (doesn't play nice with autoselectFirst)highlightTyped`Boolean`Highlight matched part of the suggestionhighlightClass`String`Class applied to the mark elementfullWidth`Boolean`Match the width on the input fieldfixed`Boolean`Use fixed positioning (solve overflow issues)fuzzy`Boolean`Fuzzy searchstartsWith`Boolean`Must start with the string. Defaults to false (it matches any position).singleBadge`Boolean`Show badge for single elementsactiveClasses`Array`By default: \["bg-primary", "text-white"\]labelField`String`Key for the labelvalueField`String`Key for the valuesearchFields`Array`Key for the searchqueryParam`String`Name of the param passed to endpoint (query by default)server`String`Endpoint for data providerserverMethod`String`HTTP request method for data provider, default is GETserverParams`String` | `Object`Parameters to pass along to the server. You can specify a "related" key with the id of a related field.serverDataKey`String`By default: datafetchOptions`Object`Any other fetch options ()liveServer`Boolean`Should the endpoint be called each time on inputnoCache`Boolean`Prevent caching by appending a timestampallowHtml`Boolean`Allow html in input (can lead to script injection)inputFilter`function`Function to filter inputsanitizer`function`Alternative function to sanitize contentdebounceTime`Number`Debounce time for live servernotFoundMessage`String`Display a no suggestions found message. Leave empty to disableonRenderItem[`RenderCallback`](#RenderCallback)Callback function that returns the suggestiononSelectItem[`ItemCallback`](#ItemCallback)Callback function to call on selectiononClearItem[`ValueCallback`](#ValueCallback)Callback function to call on clearonCreateItem[`CreateCallback`](#CreateCallback)Callback function when an item is createdonBlur[`EventCallback`](#EventCallback)Callback function on bluronFocus[`EventCallback`](#EventCallback)Callback function on focusonCanAdd[`AddCallback`](#AddCallback)Callback function to validate item. Return false to show validation message.onServerResponse[`ServerCallback`](#ServerCallback)Callback function to process server response. Must return a PromiseonServerError[`ErrorCallback`](#ErrorCallback)Callback function to process server errors.confirmClear[`ModalItemCallback`](#ModalItemCallback)Allow modal confirmation of clear. Must return a PromiseconfirmAdd[`ModalItemCallback`](#ModalItemCallback)Allow modal confirmation of add. Must return a PromiseAny of these config option can be changed later with `setConfig`. To know more about these features, check the demo! Callbacks --------- [](#callbacks) ### EventCallback ⇒ `void` [](#eventcallback--void) ParamTypeevent`Event`inst[`Tags`](#Tags) ### ServerCallback ⇒ `Promise` [](#servercallback--promise) ParamTyperesponse`Response` ErrorCallback ⇒ `void` ---------------------- [](#errorcallback--void) ParamTypee`Error`signal`AbortSignal`inst[`Tags`](#Tags) ### ModalItemCallback ⇒ `Promise` [](#modalitemcallback--promise) ParamTypelabel`String`inst[`Tags`](#Tags) ### RenderCallback ⇒ `String` [](#rendercallback--string) ParamTypeitem[`Suggestion`](#Suggestion)label`String`inst[`Tags`](#Tags) ### ItemCallback ⇒ `void` [](#itemcallback--void) ParamTypeitem[`Suggestion`](#Suggestion)inst[`Tags`](#Tags) ### ValueCallback ⇒ `void` [](#valuecallback--void) ParamTypevalue`String`inst[`Tags`](#Tags) ### AddCallback ⇒ `void` | `Boolean` [](#addcallback--void--boolean) ParamTypevalue`String`data`Object`inst[`Tags`](#Tags) ### CreateCallback ⇒ `void` [](#createcallback--void) ParamTypeoption`HTMLOptionElement`inst[`Tags`](#Tags)Tips ---- [](#tips) - 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) Style ----- [](#style) 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` You can also use the `tags-pure.scss` file which provide you a css vars only version of the required styles (works well with bootstrap 5.3) Without Bootstrap 5 ------------------- [](#without-bootstrap-5) ### Bootstrap 4 support [](#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 [](#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 ---- [](#demo) How does it look ? ------------------ [](#how-does-it-look-) [![screenshot](screenshot.png "screenshot")](screenshot.png) Do you need to init this automagically ? ---------------------------------------- [](#do-you-need-to-init-this-automagically-) You can now use this as a custom element as part of my [Formidable Elements](https://github.com/lekoala/formidable-elements) collection. Or you can use [Modular Behaviour](https://github.com/lekoala/modular-behaviour.js) ([see demo](https://codepen.io/lekoalabe/pen/wvmBLoB)) Browser supports ---------------- [](#browser-supports) Modern browsers (edge, chrome, firefox, safari... not IE11). [Add a warning if necessary](https://github.com/lekoala/nomodule-browser-warning.js/). Also check out -------------- [](#also-check-out) - [Bootstrap5 autocomplete](https://github.com/lekoala/bootstrap5-autocomplete): the autocomplete input for bootstrap 5 (and more!) - [BS Companion](https://github.com/lekoala/bs-companion): the perfect bootstrap companion - [Admini](https://github.com/lekoala/admini): the minimalistic bootstrap 5 admin panel How to contribute ----------------- [](#how-to-contribute) If you want to make a PR, please make your changes in `tags.js` and do not commit any build files They will be updated upon release of a new version. If you want to test your changes, simply run `npm start` and test in `demo.html` (feel free to add new test cases). For scss updates, apply changes to scss files. They need to be compiled manually since they are not meant to be used by themselves. ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community16 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 96.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 3 Last Release 742d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/abdefd19bc827b3f998529fe0d6354e7851343db472511097979847b8c650936?d=identicon)[ryno-liquidedge](/maintainers/ryno-liquidedge) --- Top Contributors [![lekoala](https://avatars.githubusercontent.com/u/250762?v=4)](https://github.com/lekoala "lekoala (528 commits)")[![ryno-liquidedge](https://avatars.githubusercontent.com/u/126059897?v=4)](https://github.com/ryno-liquidedge "ryno-liquidedge (4 commits)")[![un0tec](https://avatars.githubusercontent.com/u/55037574?v=4)](https://github.com/un0tec "un0tec (3 commits)")[![Dazzar56](https://avatars.githubusercontent.com/u/59544275?v=4)](https://github.com/Dazzar56 "Dazzar56 (2 commits)")[![fahmij8](https://avatars.githubusercontent.com/u/58651943?v=4)](https://github.com/fahmij8 "fahmij8 (2 commits)")[![mariusa](https://avatars.githubusercontent.com/u/1283842?v=4)](https://github.com/mariusa "mariusa (2 commits)")[![kuboon](https://avatars.githubusercontent.com/u/48445?v=4)](https://github.com/kuboon "kuboon (1 commits)")[![Hoytron](https://avatars.githubusercontent.com/u/18525285?v=4)](https://github.com/Hoytron "Hoytron (1 commits)")[![edika99](https://avatars.githubusercontent.com/u/20558528?v=4)](https://github.com/edika99 "edika99 (1 commits)")[![Gaetanbrl](https://avatars.githubusercontent.com/u/16317988?v=4)](https://github.com/Gaetanbrl "Gaetanbrl (1 commits)")[![hyodyllinentekniikka](https://avatars.githubusercontent.com/u/137195494?v=4)](https://github.com/hyodyllinentekniikka "hyodyllinentekniikka (1 commits)") ### Embed Badge ![Health badge](/badges/liquidedge-app-bootstrap5-tags/health.svg) ``` [![Health](https://phpackages.com/badges/liquidedge-app-bootstrap5-tags/health.svg)](https://phpackages.com/packages/liquidedge-app-bootstrap5-tags) ``` ### Alternatives [prodigyview/prodigyview Complete PHP Toolkit 648.2k](/packages/prodigyview-prodigyview)[pingpong/oembed Laravel 4 - Retrieve page info using oembed, opengraph, etc. 142.1k](/packages/pingpong-oembed) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)