Extend from $.fn.combobox.defaults. Override defaults with $.fn.tagbox.defaults.

The TagBox component extends from combobox, it has all features of combobox. The TagBox allows the user to display tag labels instead of displaying values on the inputing box.


  • combobox

Usage Example

Create tagbox from markup.

Create tagbox by using javascript.


The properties extend from combobox, below is the added properties for tagbox:

Name Type Description Default
hasDownArrow boolean Defines if to display the down arrow button. false
tagFormatter function(value,row) The function to return the formatted value.

Code example:

	tagFormatter: function(value,row){
		var opts = $(this).tagbox('options');
		return row ? row[opts.textField] : value;
tagStyler function(value,row) The tag styler function, return style string to custom the tag style such as 'background:red'.

Code example:

	tagStyler: function(value){
		if (value == 3){
			return 'background:#ffd7d7;color:#c65353';
		} else if (value == 4){
			return 'background:#b8eecf;color:#45872c';


The events extend from combobox, below is the added events for tagbox.

Name Parameters Description
onClickTag value Fires when the tag is clicked.
onBeforeRemoveTag value Fires before removing a tag, return false to deny the action.
onRemoveTag value Fires when the user removes a tag.


The methods extend from combobox.