UI Widgets TextBox

A single-line text box widget.

Type: Object

The dxTextBox widget enables a user to enter a single line of text. The current widget value is specified by the value option.

Declare an observable variable and pass it to the value option to update the variable each time the widget value changes.

var text = ko.observable(0);

To create the dxTextBox widget, add a div element with dxTextBox Knockout binding within the body of the required view.

<div data-bind="dxTextBox:{value:text}"></div>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
<div class="dx-fieldset">
  <div class="dx-field">    
    <div class="dx-field-label">Maxlength</div>    
    <div class="dx-field-value" data-bind="
      dxTextBox: { maxLength: length, placeholder: lengthDescription }"></div>  
  <div class="dx-field">
    <div class="dx-field-label">Password</div>
    <div class="dx-field-value" data-bind="
      dxTextBox: { mode: passMode, placeholder: secretDescription }"></div>  
    <div class="dx-field">
    <div class="dx-field-label">Read-only</div>
    <div class="dx-field-value" data-bind="
      dxTextBox: { readOnly: readonly, value: readonlyDescription }"></div>  
length = 10;
lengthDescription = "10 characters maximum";

passMode = "password";
secretDescription = "type a password";

readonly = true;
readonlyDescription = "read-only text box";


An object defining configuration options for the dxTextBox widget.


This section describes the members used to manipulate the widget.


This section describes events fired by this component.