# 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](/files/-MgBzYQWWcKCuMwN1Ke1)

{% 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](/files/-MckCODR4-yzTw-zat8a)

{% 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](/files/-MgC3jXebvDkTa24xLdS)

#### 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](/docs/concepts/javascript-object-model.md)               |
| Toolcontainer state | "editor", see [Embedded Tools](/docs/controls/general/embedded-tools.md)                                            |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/editors/textbox/tagtextbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.