TagsPRO

Input multiple values using tags. Powered by Bootstrap Tags Input.

Optional plugin

As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.

Tags provide a way for users to add multiple separate values in an input and allow for easy removal of individual values.

It works with both a single <input> element or a <select> element with the multiple option. Both should contain data-role="tagsinput" in order to initialize the tags element.

Label Example help text. Lorem ipsum.


<div class="form-group">
	<label>Label</label>
	<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput">
	<small class="form-text text-muted">Example help text. Lorem ipsum.</small>
</div>

<div class="form-group tagsinput-danger">
	<label>Label</label>
	<select multiple data-role="tagsinput">
		<option value="Amsterdam">Amsterdam</option>
		<option value="Washington">Washington</option>
		<option value="Sydney">Sydney</option>
		<option value="Beijing">Beijing</option>
		<option value="Cairo">Cairo</option>
	</select>
	<small class="form-text text-muted">Example help text. Lorem ipsum.</small>
</div>

Customizing tags

Colors

The color of tags can be set to any value of the color palette, using .tagsinput-{color}, where color can be a value such as primary, secondary, c3, info, etc.

JavaScript behavior

While tags are automatically initialized by the plugin, they are refreshed as well to make sure they render properly. This is done using the following function:


$('[data-role="tagsinput"]').tagsinput('refresh');

You may retrieve values from a tags input as an array of strings by calling:


$('#your-tagsinput').tagsinput('items');

Options, methods & events

For the full list of options, methods and events related to this plugin, visit the Bootstrap Tags Input documentation.

Tables Toasts