The requested page is not available for the requested platform. You are viewing the content for Default platform.

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); 
    }
}

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.

<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