Overview

The entered text is: Nancy Davolio

The Text Box is a UI component that enables a user to enter and edit a single line of text.

The Text Box component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

Bind Value On Input Change

The entered text is:

You can bind the editor's Text property to a field. If a user changes the input value, the editor updates its Text property. Use the BindValueMode property to specify when the update should happen. The following modes are available:

  • OnLostFocus (default) — The editor value is updated after the editor loses focus.
  • OnInput — The editor value is updated whenever a user types.
  • OnDelayedInput — The editor value is updated with a delay after a user makes changes.

Clear Button and Placeholder

Set the ClearButtonDisplayMode property to Auto to display the Clear button in the Text Box when it is not empty.

Use the NullText property to display placeholder text in the Text Box when it is empty.

Password

The Text Box allows you to mask all characters typed into the editor. Set the Password property to true to activate the password mode.