blazor-devexpress-dot-blazor-e3e5627e.md
A single-line text editor.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxTextBox :
DxInputDataEditorBase<string>,
IFocusableEditor
The DevExpress Text Box for Blazor (<DxTextBox>) allows you to enter and edit a single line of text.
Follow the steps below to add the Text Box component to an application:
<DxTextBox>…</DxTextBox> markup to a .razor file.Refer to the following list for the component API reference: DxTextBox Members.
Blazor Text Box does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.
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.
If you do not use two-way data binding, handle the TextChanged event to respond to changes made in the editor. The following code snippet 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;
}
}
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>
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; }
}
Use the SizeMode property to specify a Text Box size. The following code snippet 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";
}
To customize styles for the Text Box container, use the CssClass property. The following code snippet applies a custom style to container borders:
<DxTextBox Text="Some text" CssClass="my-style"></DxTextBox>
.my-style {
border: 1px solid darkorchid;
border-radius: 3px;
}
You can also use the InputCssClass property to customize the editor’s input area.
For additional information, refer to the following help topics:
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
You can add custom command buttons to the Text Box. Refer to Command Buttons for additional information.
The following code snippet 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; } = "[email protected]";
string EmailLink { get; set; } = "mailto:[email protected]";
void OnEmailChanged(string email) {
Email = email;
EmailLink = $"mailto:{email}";
}
}
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.
<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 additional information, refer to the following help topic: Validate Input.
<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
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(){
//...
}
}
Create a separate label to add accessible information to your editors.
<label for="label1">Text</label>
<DxTextBox InputId="label1"/>
You can create a hidden label that is not visible on the page, but is read by screen reader tools.
<label for="label1" style="display: none">Text</label>
<DxTextBox InputId="label1"/>
This approach is demonstrated in the following demo: Blazor Data Editors - Overview.
If you use the DxFormLayout component to arrange editors, the component renders the Caption property value as the <label> element with the specified for attribute.
<DxFormLayout>
<DxFormLayoutItem Caption="Name:" ... >
<DxTextBox InputId="label1" ... />
</DxFormLayoutItem>
...
The rendered code:
<label for="label1" ... >
Name:
</label>
...
<input id="label1" type="text" ... >
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
Object ComponentBase DxComponentBase DxDataEditor<String> DxInputDataEditorBase<String> DxTextBox
See Also