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 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>
Options can be either passed to the constructor (eg: optionName) or in data-option-name format.
Name | Type | Description |
---|---|---|
allowNew | Boolean |
Allows creation of new tags |
showAllSuggestions | 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 icon |
clearEnd | Boolean |
Place clear icon at the end |
selected | Array | String |
A comma separated list of selected values |
regex | String |
Regex for new tags |
separator | 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 option |
clearLabel | String |
Text as clear tooltip |
searchLabel | String |
Default placeholder |
keepOpen | Boolean |
Keep suggestions open after selection, clear on focus out |
baseClass | String |
Customize the class applied to badges |
addOnBlur | Boolean |
Add new tags on blur (only if allowNew is enabled) |
suggestionsThreshold | Number |
Number of chars required to show suggestions |
maximumItems | Number |
Maximum number of items to display |
autoselectFirst | Boolean |
Always select the first item |
updateOnSelect | Boolean |
Update input value on selection (doesn't play nice with autoselectFirst) |
fullWidth | Boolean |
Match the width on the input field |
labelField | String |
Key for the label |
valueField | String |
Key for the value |
server | String |
Endpoint for data provider |
serverParams | String | Object |
Parameters to pass along to the server |
liveServer | Boolean |
Should the endpoint be called each time on input |
noCache | Boolean |
Prevent caching by appending a timestamp |
debounceTime | Boolean |
Debounce time for live server |
notFoundMessage | String |
Display a no suggestions found message. Leave empty to disable |
onRenderItem | function |
Callback function that returns the label |
onSelectItem | function |
Callback function to call on selection |
onServerResponse | function |
Callback function to process server response |
- 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)
- Support focus styles by implementing a pseudo class
form-control-focus
(see tags-standalone.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!)
- Admini: the minimalistic bootstrap 5 admin panel