Tags
A tag is a keyword or term assigned to a piece of information.
Bootstrap 5 tags
Replace select[multiple] with nices badges.
Add a new tag
It allows you to add new tags without validation or limitation.
Use space and comma
Use a space or comma key to add new tags.
Validation
Only values from the dropdown are accepted.
Clear buttons
Add a clear button to remove the selected tag.
Custom colors
Add custom color to the tags
Single value
Only one value is allowed, similar to the <select> element.
Tagify
Transforms an input field or a textarea into a Tags component.
Basic example
You can create any tags you want without any count limits.
Tips: Try Double-clicking a tag to edit it
Whitelist
Only allow tags from the whitelist to exist
Custom suggestions
The dropdown will appear immediately when Tagify has focus.
Render Suggestions List Manually
useful for situations where it is wished showing the suggestions list inside a modal or your own popup implementaion, or even always show it.
Add items from below list:
Readonly
If the original input field has a readonly attribute, then, via CSS, Tagify blocks interactions with pointer-events: none;
Readonly mix
Tags that are read-only mixed with removable tags
Disabled
Disabled tag input
Outside-Of-The-Box
The suggestions dropdown will be rendered right next to input element
Single-Value Select
Similar to native <select> element, but allows free text as value.
