Use Bootstrap Tag Inputs
Modern Tag Inputs for Bootstrap 5
Use Bootstrap Tag turns any text input into an interactive tag editor with keyboard-friendly chip controls, variants, validation states, and utility methods. It is a pure JavaScript plugin that seamlessly matches Bootstrap styling and automatically adapts to WaveDash light and dark modes.
- Zero Dependencies: Works with plain Bootstrap 5
- Flexible Input: Accept comma, Enter, or custom separators
- Smart Validation: Enforce limits, duplicates, and transformation
- Accessible by Design: Keyboard navigation and ARIA-friendly markup
- Variants: Match Bootstrap contextual colors
- Runtime API: Add, remove, read tags programmatically
- Theme Awareness: Automatic dark mode detection
- WaveDash Ready: CSS/JS already available via CDN includes
Quick Start
WaveDash loads the CSS and JavaScript bundles for Use Bootstrap Tag automatically. Add the data-ub-tag attribute to any text input and the admin helper will initialize it on page load.
<input
type="text"
class="form-control"
value="Laravel,Livewire,PHP"
data-ub-tag
data-ub-tag-variant="primary"
/>The helper defined in resources/js/admin-static.js automatically scans for input[data-ub-tag] and initializes the plugin:
document.addEventListener('DOMContentLoaded', () => {
window.initializeBootstrapTags();
});Core Variations
<input
type="text"
class="form-control"
placeholder="Add a tag then press comma or Enter"
data-ub-tag
/><input
type="text"
class="form-control"
placeholder="Enter tags"
data-ub-tag
data-ub-tag-max="3"
/><input
type="text"
class="form-control"
placeholder="Add a color then press space or Enter"
data-ub-tag
data-ub-tag-separator=" "
/><input
type="text"
class="form-control"
value="html,css,js,js"
data-ub-tag
data-ub-tag-duplicate
/>Advanced Options
<input
type="text"
class="form-control"
value="HTML,CSS,JS"
data-ub-tag
data-ub-tag-transform="input => input.toUpperCase()"
/><input
type="text"
class="form-control"
value="left aligned"
data-ub-tag
data-ub-tag-x-position="left"
/><input class="form-control form-control-sm" data-ub-tag>
<input class="form-control" data-ub-tag>
<input class="form-control form-control-lg" data-ub-tag><input
type="text"
class="form-control"
data-ub-tag
data-ub-tag-no-input-onblur
/>Bootstrap Validation
Server-side validation works out of the box — simply apply Bootstrap's is-invalid or is-valid classes to reflect state.
<input
type="text"
class="form-control is-invalid"
data-ub-tag
placeholder="Add a tag"
/>Contextual Variants
<input data-ub-tag data-ub-tag-variant="primary">
<input data-ub-tag data-ub-tag-variant="success">
<!-- ... -->Runtime Methods
API ControlThe plugin returns an API instance with helper methods to manage the current tag collection. Use these methods to connect buttons, Livewire events, or AJAX callbacks.
const instance = window.UseBootstrapTag(document.getElementById('tags'))
instance.addValue('react')
instance.removeValue(['vue', 'svelte'])
console.log(instance.getValue()) // "html,css,js"
console.log(instance.getValues()) // ["html", "css", "js"]Implementation Notes
Initialization
The helper window.initializeBootstrapTags() is defined in the shared admin bundle and runs on page load. Call it manually if you dynamically inject inputs (e.g., via Livewire or AJAX).
Data Attribute Reference
| Attribute | Description |
|---|---|
data-ub-tag
|
Turns the input into a tag editor |
data-ub-tag-max
|
Maximum number of tags allowed |
data-ub-tag-duplicate
|
Allow duplicate tag values |
data-ub-tag-separator
|
Custom separator character(s) |
data-ub-tag-transform
|
Supply a transformation function for new inputs |
data-ub-tag-variant
|
Contextual color (primary, success, danger, etc.) |
data-ub-tag-x-position
|
Position of the remove button (left or right) |
data-ub-tag-no-input-onblur
|
Prevent automatically creating a tag when focus leaves the field |