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

Set the BindValueMode property to BindValueMode.OnInput to update the Text property each time the input value changes.

Clear Button

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.


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

Read-Only and Disabled Modes

In this demo, the Text Box displays values but does not allow users to change them. To implement this behavior, you can use any of the following modes:

  • Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
  • Disabled mode. In this mode, the component cannot be focused or navigated. Set the Enabled property to false to activate this mode.