# TextBox
The [Wisej.Web.TextBox](https://docs.wisej.com/wisej-api/namespaces/wisej.web/textbox) control enables users to enter unformatted text.
The `TextBox` control accepts a single line of text. Enable the `Multiline` property to allow multiple lines of text input.
{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}
## Features
### Label
The `TextBox` control supports the inline [Label](https://docs.wisej.com/docs/controls/general/labels) property. This allows setting a label in relation to a `TextBox` control without creating an additional `Label` control.
{% content-ref url="../general/labels" %}
[labels](https://docs.wisej.com/docs/controls/general/labels)
{% endcontent-ref %}
### Data Binding
Data binding supports formatting and value conversion through the default [data binding](https://docs.wisej.com/docs/controls/general/data-binding) infrastructure. The default data property is `Text`.
{% content-ref url="../general/data-binding" %}
[data-binding](https://docs.wisej.com/docs/controls/general/data-binding)
{% endcontent-ref %}
### Spell Checking
Enable the browser's built-in spell checking by setting the `SpellCheck` property to `true`.
This functionality relies on the browser's language and spell checking support. Third-party spell checking is possible but outside Wisej.NET functionality.
### Tool Buttons
A key Wisej.NET feature available in most controls. The [Tools](https://docs.wisej.com/docs/controls/general/embedded-tools) property enables adding internal buttons aligned left or right, with user clicks handled through the `ToolClicked` event.
{% content-ref url="../general/embedded-tools" %}
[embedded-tools](https://docs.wisej.com/docs/controls/general/embedded-tools)
{% endcontent-ref %}
### Lazy Events
Some `TextBox` events fire only when a handler is attached. This prevents unnecessary browser requests unless explicitly subscribed.
The `KeyDown` event is a [Lazy Event](https://docs.wisej.com/docs/controls/general/lazy-events), preventing ajax requests for each character typed.
{% hint style="warning" %}
When extending a control class and overriding On\[EventName] for a lazy event without attaching a handler, the code won't execute unless a handler is attached.
{% endhint %}
{% content-ref url="../general/lazy-events" %}
[lazy-events](https://docs.wisej.com/docs/controls/general/lazy-events)
{% endcontent-ref %}
### Watermark
All Wisej.NET editable controls include the `Watermark` property, displaying background text in empty fields.
Wisej.NET renders the watermark using the [placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder) HTML attribute when supported, otherwise creating an overlaid label managed by the Wisej.NET JavaScript library.
### Password
Set the `PasswordChar` property to any character or the `InputType` to `Password` for a password input field. The `PasswordChar` value always converts to "\*" as browsers control password field display. This property exists for WinForms migration compatibility.
{% hint style="info" %}
For a password visibility toggle, add a tool icon and switch `InputType` between `Text` and `Password`.
{% endhint %}
### Character Casing
The `CharacterCasing` property forces text case transformation on both client and server. Wisej.NET performs the change while typing (client) and when setting the Text property (server).
## How To
### Enter tab or enter
By default, Tab moves focus to the next control and Enter does nothing. For tab characters and newlines, set `Multiline` to `true` and enable `AcceptsTab` or `AcceptsReturn`.
### Filter keyboard input
Limit accepted characters using either:
1. Set the `Filter` property to a [regular expression](https://regex101.com)
2. Handle the keydown [event on the client](https://docs.wisej.com/api/wisej.web/general/control#clientevents) with JavaScript
Server-side `KeyDown` handling cannot prevent character input as the browser processes it before server communication.
![Equivalent to setting Filter = "\[a-zA-Z\]"](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-882fa8690d67746737ff5bd6f9f22fc40b0518e6%2Fimage.png?alt=media)
### Customize the appearance
Customize `TextBox` appearance through:
1. Properties (`BackColor`, `ForeColor`, `BorderStyle`, `Font`)
2. Custom [theme](https://docs.wisej.com/theme-builder/)
3. Theme mixin
4. Custom styles
For specialized UI like Material-3 animated underline on focus, use theme customization or custom styles.
The image shows a `TextBox` with "border-radius:20px" in `CssStyle`. For shared styles, use `CssClass` and add a StyleSheet file through Default.html or the [StyleSheet](https://docs.wisej.com/docs/controls/extenders/stylesheet) extender.
### Native Input Types
The `TextBox` supports various [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) types through the `InputType` property.
{% hint style="info" %}
Native input styling is limited to browser-specific CSS properties outside the Wisej.NET theme system.
{% endhint %}
The `Text` property always returns a string representing the native input value. Special input types have specific behaviors:
**Radio**
Clicking toggles the `Checked` property and fires `CheckedChanged` (not `TextChanged`). Checked value is "on".
{% hint style="danger" %}
Browsers don't fire events for \. Content localization depends on browser language.
{% endhint %}
**Checkbox**
Clicking toggles the `Checked` property and fires `CheckedChanged` (not `TextChanged`). Checked value is "on".
## Advanced
### AutoComplete
The `AutoCompleteList` property enables browser native autocomplete with a string array.
Browser filters the `AutoCompleteList` as users type.
The `AutoComplete` property controls this feature. When enabled, browsers may build their own suggestions.
Common `AutoComplete` options include:
| Option | Description |
| --------------- | ------------------------------------------------------------- |
| Email | An email address |
| Username | A username or account name |
| NewPassword | A new password field for account creation or password changes |
| CurrentPassword | The user's current password |
| OneTimeCode | A one-time verification code |
See [Mozilla Developer Site](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for all options.
{% hint style="danger" %}
Browser implementation controls this functionality, including when to use previous values.
{% endhint %}
### Select content when focused
Wisej.NET selects all text when tabbing between fields. Clicking places the cursor at click location.
Enable `SelectOnEnter` for automatic text selection on any focus method.
### Native context menu
`EnableNativeContextMenu` (default: `true`) controls the browser's context menu on right-click. Disable to prevent the native menu.
{% hint style="info" %}
An assigned [ContextMenu](https://docs.wisej.com/api/wisej.web/menus/wisej.web.contextmenu) always overrides the native menu.
{% endhint %}
### JavaScript Widget
| Item | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Class name | "wisej.web.TextBox" or "wisej.web.TextArea" when Multiline is true |
| Theme appearance | "textbox", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements) |
| Child components | "textfield" is the inner \ 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) |