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.

Telerik UI for Blazor Ninja image

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.

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="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";
    }
}

Next Steps

See Also

In this article