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 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

  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 {
    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.
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.

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