DxTextBox Class

A single-line text editor.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxTextBox :
    DxInputDataEditorBase<string>,
    IFocusableEditor

Remarks

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

TextBox Overview

Run Demo

Watch Video

Add a Text Box to a Project

Follow the steps below to add the Text Box component to an application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
Add the <DxTextBox>…</DxTextBox> markup to a .razor file.
Configure the component: specify the editor’s value, handle value changes, apply a mask, and so on (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. You can use the @bind attribute to bind the Text property to a data field. Refer to the following topic for details: Two-Way Data Binding.

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

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

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

The Text property value is updated when the editor loses focus (OnLostFocus mode). You can set the BindValueMode property to OnInput or OnDelayedInput to update the Text property when a user changes the input value.

Handle a Text Change

If you do not use two-way data binding, 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="Some text" TextChanged="@((newValue) => OnTextChanged(newValue))"></DxTextBox>
<DxButton Enabled="@IsEnabled">Update Text</DxButton>

@code {
    bool IsEnabled = true;

    void OnTextChanged(string newValue) {
        if (!string.IsNullOrEmpty(newValue)) {
            IsEnabled = false;
        } else IsEnabled = true;
    }
}

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.

TextBox Password

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

Run Demo: Text Box - Password

Mask

Use the Masked Input component to apply a mask to a text editor.

<DxMaskedInput @bind-Value="Value"
               Mask="(000)000-00-00" >
</DxMaskedInput>

@code{
    String Value { get; set; }
}

Run Demo: Masked Input

Appearance Customization

Use the SizeMode property to specify a Text Box size. The code below applies different size modes to Text Box components.

<DxTextBox @bind-Text="@TextValue" SizeMode="SizeMode.Small"></DxTextBox>

<DxTextBox @bind-Text="@TextValue" SizeMode="SizeMode.Medium"></DxTextBox>

<DxTextBox @bind-Text="@TextValue" SizeMode="SizeMode.Large"></DxTextBox>

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

Text Box - Size Mode

To customize styles for the Text Box container, use the CssClass property. The following code snippet applies a custom style to container borders:

<style>
    .my-style {
        border: 1px solid darkorchid;
        border-radius: 3px;
    }
</style>

<DxTextBox Text="Some text" CssClass="my-style"></DxTextBox>

Custom Input Border

You can also use the InputCssClass property to customize the editor’s input area.

For more information, refer to the following help topics:

For more information, refer to the following topic: Size Modes.

Clear Button and Placeholder

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 (placeholder) in the editor when its value is null.

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

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

Run Demo: Text Box - Clear Button and Placeholder

Add Command Buttons

You can add custom command buttons to the Text Box. Refer to Command Buttons for more information.

The code below adds the Send E-mail button to the Text Box.

<DxTextBox Text="@Email"
           TextChanged="@((string value) => OnEmailChanged(value))"
           CssClass="dx-demo-editor-width">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-mail"
                        Tooltip="Send Email"
                        NavigateUrl="@EmailLink" />
    </Buttons>
</DxTextBox>


@code{
    string Email { get; set; } = "test@example.com";
    string EmailLink { get; set; } = "mailto:test@example.com";
    void OnEmailChanged(string email) {
        Email = email;
        EmailLink = $"mailto:{email}";
    }
}

Input Validation

You can add a standalone Text Box or the Form Layout component to the Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

Razor
Starship

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6" >
            <Template >
                <DxTextBox @bind-Text="@starship.Identifier" />
            </Template >
        </DxFormLayoutItem >
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship=new Starship();
}

using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
    ErrorMessage = "The Identifier exceeds 16 characters.")]
    public string Identifier { get; set; }
    // ...
}

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation

Read-Only State

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

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

Run Demo: Text Box - Read-Only and Disabled Modes

HTML Attributes and Events

You can use HTML attributes and events to configure the Text Box.

<DxTextBox Text="Some text"
           id="text"
           name="text"
           autocomplete="on"
           maxlength="10"
           @onselect="MyFunction">
</DxTextBox>

@code {
    void MyFunction(){
        //...
    }
}