Blazor TextBox Overview
The Blazor TextBox component allows the user to enter a generic plain text message.
You can control various attributes of the input element and turn the TextBox into a password box, for example. You can also configure this component to respond to events.
The TextBox component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor TextBox
- Add the
<TelerikTextBox>tag to a Razor file. - Set the
Valueparameter to astringobject. It supports one-way and two-way binding.
Basic TextBox with two-way value binding
<p>TextBox value: @StringValue</p>
<TelerikTextBox @bind-Value="@StringValue" />
@code {
string StringValue { get; set; }
}
Appearance
The TextBox component provides settings to control its appearance. Read more about the Blazor TextBox appearance settings.
To learn more about the appearance, anatomy, and accessibility of the TextBox, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Events
The Blazor TextBox generates blur and value change events for further customizing its behavior. Read more about the Blazor TextBox events.
TextBox Parameters
The Blazor TextBox provides various parameters to configure the component:
| Parameter | Type and Default Value | Description |
|---|---|---|
Value |
string |
Get/set the value of the input, can be used for binding. |
AutoComplete |
string |
A string that maps to the autocomplete attribute of the HTML element. You can use it to instruct the browser to turn off its autocompletion or to use specific settings for it (such as new-password). Make sure to use values that make sense for a text input. For example, if you need a numerical input, use the TelerikNumericTextBox component, or the TelerikDatePicker for dates. |
Class |
string |
The custom CSS class to be rendered on the <span class="k-textbox"> element. |
DebounceDelay |
int |
Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |
Enabled |
bool true
|
Whether the input is enabled. |
ReadOnly |
bool |
If set to true, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
Id |
string |
Renders as the id attribute on the <input /> element, so you can attach a <label for=""> to the input. |
InputMode |
string |
A string that maps to the inputmode attribute of the HTML element. You can use it to instruct the rendering device to show a suitable virtual keyboard (for example, one optimized for entering an URL or an email). Make sure to use values that make sense for a text input. For example, if you need a numerical input, use the TelerikNumericTextBox component, or the TelerikDatePicker for dates. |
Name |
string |
The name attribute of the HTML element. It is usually required so the AutoComplete will be honored by the browser. |
Password |
bool |
When set to true, the HTML element renders type="password" so that the user input is hidden. You can find examples of validation and reveal buttons in the Live Demo: Password Textbox
|
Placeholder |
string |
A string that maps to the placeholder attribute of the HTML element. If a Label is defined, it will be shown instead of the placeholder when the input is not focused. |
TabIndex |
Nullable<int> |
Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key. |
Title |
string |
Maps to the title attribute of the HTML element. You can use it to add a tooltip. |
ValidateOn |
ValidationEvent enum ( Input) |
Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs. |
Width |
string |
The component width. See Dimensions. The Width parameter has no default value, but the theme applies a width: 100% style. |
See also the Input Validation article.
TextBox Reference and Methods
The TextBox provides a FocusAsync method that allows the application to focus the component programmatically. First, obtain reference to the component through its @ref attribute.
Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips.
Use TextBox methods
<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>
<TelerikTextBox @ref="@TextBoxRef"
@bind-Value="@TextBoxValue"
Width="200px" />
@code {
private TelerikTextBox TextBoxRef { get; set; }
private string TextBoxValue { get; set; }
async Task FocusTextBox()
{
await TextBoxRef.FocusAsync();
}
}
Examples
Customized text box with input attributes
<label for="email">Email</label>
<TelerikTextBox Placeholder="john@smith.com" Title="write your email here"
TabIndex="3" Width="180px"
InputMode="email" Id="email" AutoComplete="email" Name="email">
</TelerikTextBox>
Password type TextBox
@* An example of enabling the Password mode of the text box. Make sure to add a form and validation
for example: https://demos.telerik.com/blazor-ui/textbox/password
*@
<TelerikTextBox Password="true"
@bind-Value="@ThePassword"
AutoComplete="current-password"
Name="password" Id="password" />
@code {
// in a real case you should have a form, a model, and validation
// the form may also need autocomplete attribute and other corresponding inputs to enable autocompletion
string ThePassword { get; set; }
}
Programmatically change the TextBox value
TextBox value: @StringValue
<br />
<TelerikButton OnClick="@ChangeValue">Change TextBox Value</TelerikButton>
<br />
<TelerikTextBox @bind-Value="@StringValue" />
@code {
string StringValue { get; set; } = "lorem ipsum";
void ChangeValue()
{
StringValue = "New programmatic value";
}
}