DxTextBox Class

A Text Box component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxTextBox :
    DxTextBoxBase

Remarks

The DevExpress Text Box for Blazor (<DxTextBox>) allows you to enter and edit a single line of text.

Blazor_TextBox_Overview

NOTE

Online Demo: Text Box

To add the <DxTextBox> component to an application, follow the steps below:

  • Create and configure the application as described in the Create a New Blazor Application document.

  • Add the <DxTextBox>...</DxTextBox> markup to your application.

  • Configure the component (see the sections below).

Edit Value

Use the Text property to specify an editor value or to bind the displayed text to a data source object:

<DxTextBox Text="Some text"></DxTextBox>

<DxTextBox @bind-Text="@TextValue"></DxTextBox>

@code {
    string TextValue = "Some text";
}

If you bind the editor text to a non-string value (CustomTypeValue), the editor displays the CustomTypeValue.ToString() value.

Handle a Text Change

Handle the TextChanged event to respond to changes made in the editor. The code below enables the Update Text button once a user types in the Text Box editor.

<DxTextBox Text="" TextChanged="@((newValue) => OnTextChanged(newValue))"></DxTextBox>
<button type="button" class="btn btn-primary" disabled="@IsDisabled">Update Text</button>

@code {
    bool IsDisabled = true;

    void OnTextChanged(string newValue)
    {
        if (!string.IsNullOrEmpty(newValue))
        {
            IsDisabled = false;
        }
        InvokeAsync(StateHasChanged); 
    }
}

Clear Button

Set the ClearButtonDisplayMode property to Auto to display the Clear button in the Text Box editor when it is not empty. Use the NullText property to display the prompt text in the editor when its value is null.

Blazor_TextBox_ClearButton

<DxTextBox @bind-Text="@TextValue" 
           ClearButtonDisplayMode="@DataEditorClearButtonDisplayMode.Auto"
           NullText="Type text..."></DxTextBox>

@code {
    string TextValue { get; set; } = "Some text";
}
NOTE

Online Demo: Text Box - Clear Button

Password

Set the Password property to true to treat user input as a password and mask all characters. Users cannot copy or cut text from the editor in this mode.

Blazor_TextBox_Password

<DxTextBox Password="true"> </DxTextBox>
NOTE

Online Demo: Text Box - Password

Read-Only State

<DxTextBox> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxTextBox ReadOnly="true"> </DxTextBox>
NOTE

Online Demo: Text Box - Read-Only Mode

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DevExpress.Blazor.Internal.DxEditorBase<String, DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DxTextBoxBase
DxTextBox
See Also