# 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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-7da7f3f7bc0f4427d2c6d97f4f06dbfa244ec4ed%2Fimage.png?alt=media)

{% hint style="info" %}
Enable horizontal growth by setting the `MaximumSize` property.
{% endhint %}

### Auto Completion Options

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

![TagTextBox with auto-completion options](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-045b7929ffdef8f02bb1985eba0b0b3c1fa90e09%2Fimage.png?alt=media)

{% hint style="info" %}
The drop down uses an [\<input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element with a specified [\<datalist>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist).
{% endhint %}

### 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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-9e5513a96e7b3d0b265707f1e760bf13a5dba9e1%2Fimage.png?alt=media)

#### Mixin File

Apply custom appearance using a project mixin:

```csharp
//
// 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"
							}
						}
					}
				}
			}
		}
	}
}
```

{% hint style="info" %}
Add the mixin definition to the **/Themes** directory in your project.
{% endhint %}

#### Directly in Code

Modify the theme at runtime for custom `TagTextBox` appearance:

{% tabs %}
{% tab title="C#" %}

```csharp
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";
```

{% endtab %}
{% endtabs %}

## Advanced

### JavaScript Widget

| Item                | Description                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Class name          | "wisej.web.TagTextBox"                                                                                                   |
| Theme Appearance    | "tagtextbox", inherited from "textbox"                                                                                   |
| Child components    | "textfield" is the inner \<input> widget. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model) |
| Toolcontainer state | "editor", see [Embedded Tools](https://docs.wisej.com/docs/controls/general/embedded-tools)                              |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)      |