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 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor TextBox

1. Add the <TelerikTextBox> tag to a Razor file.
2. Set the Value parameter to a string object. 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 {
    private 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 Kit documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Adornments

The component allows you to add custom elements as prefixes and suffixes. Read more about how to render custom adornments before and after the input element...

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
AutoCapitalize	string	A string that maps to the autocapitalize attribute of the HTML element. It's applicable only for touch devices and virtual keyboards.
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.
MaxLength	int?	Maps to the maxlength attribute of the HTML <input /> element.
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.
ShowClearButton	bool	Defines if the user can clear the component value through an x button rendered inside the input.
SpellCheck	string	A string that maps to the spellcheck attribute of the HTML element. Use it to disable browser spellchecking if it's intrusive to the user or due to privacy and security concerns.
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 Blazor Tooltip.
ValidateOn	ValidationEvent enum (Input)	Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs.
Value	string	The value of the input. Supports two-way binding.
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="[e-mail]" 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";
    }
}

Next Steps

• Explore the TextBox Appearance Settings
• Handle the TextBox Events

See Also

• Live Demo: TextBox
• TextBox API Reference