Skip to main content

TagTextBox

The Wisej.NET TagTextBox enables users to select multiple values as tags.

Features​

Auto Size​

The TagTextBox control automatically resizes to fit its contents, including font size changes and tag overflow.

TagTextBox with auto-sizing enabled

info

Enable horizontal growth by setting the MaximumSize property.

Auto Completion Options​

The TagTextBox control provides selection from preset items defined in the AutoCompleteList property.

TagTextBox with auto-completion options

info

The drop down uses an <input> element with a specified <datalist>.

Limit Tags and Length​

Configure tag limits using these properties:

  • MaxLength: Maximum characters allowed in the edit control
  • MaxTagCount: Maximum number of tags allowed
  • MaxTagWidth: Maximum width in pixels for tag widgets
  • MinFieldLength: Minimum characters that should fit in the editable portion before wrapping

How To​

Customize the Appearance​

Customize tag colors using the Theme Builder, a mixin, or direct code application.

The tagtextbox appearance includes a tag child component, customizable for different states.

Theme Builder​

Wisej.NET Theme Builder with custom TagTextBox tag colors

Mixin File​

Apply custom appearance using a project mixin:

//
// Mixin Theme Definition
//
// Mixin theme files define only a subset of the theme and are overlayed
// on top of the loaded theme. A mixin theme can extend or override the loaded theme.
//
// Mixin themes are useful to refine or style a particular feature in an application and/or
// style a new component.
//
{
	"appearances":
	{
		"mytagtextbox":
		{
			"inherit": "tagtextbox",
			"components": {
				"tag": {
					"states": {
						"default": {
							"styles": {
								"backgroundColor": "#ffe8d6"
							}
						},
						"selected": {
							"styles": {
								"backgroundColor": "#cb997e"
							}
						},
						"hovered": {
							"styles": {
								"backgroundColor": "#ddbea9"
							}
						}
					}
				}
			}
		}
	}
}
info

Add the mixin definition to the /Themes directory in your project.

Directly in Code​

Modify the theme at runtime for custom TagTextBox appearance:

Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["default"]["styles"]["backgroundColor"] = "#ffe8d6";
Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["hovered"]["styles"]["backgroundColor"] = "#ddbea9";
Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["selected"]["styles"]["backgroundColor"] = "#cb997e";

Advanced​

JavaScript Widget​

ItemDescription
Class name"wisej.web.TagTextBox"
Theme Appearance"tagtextbox", inherited from "textbox"
Child components"textfield" is the inner <input> widget. See JavaScript
Toolcontainer state"editor", see Embedded Tools
Source codehttps://github.com/iceteagroup/wisej-js