Textbox Overview

The Blazor Textbox component allows the user to enter a generic plain text message. You can also add an animated floating Label, a custom CSS class or control various attributes of the input element such as making it a password box, the name, placeholder, tabindex, inputmode, autocomplete and more and also respond to events.

To use a Telerik Textbox for Blazor, add the TelerikTextBox tag.

Basic textbox with two-way value binding

@theTbValue
<br />

<TelerikTextBox @bind-Value="theTbValue" Label="Enter Information"></TelerikTextBox>

@code {
    string theTbValue { get; set; } = "lorem ipsum";
}

Customized textbox 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 textbox. Make sure to add a form and validation
for example: https://demos.telerik.com/blazor-ui/textbox/password
*@

<TelerikTextBox Password="true"
                Label="Enter Password"
                @bind-Value="@ThePassword"
                AutoComplete="current-password" Name="password" Id="password">
</TelerikTextBox>
@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; }
}

Features

The textbox provides the following features:

  • AutoComplete - 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 - the CSS class that will be rendered on the input element.

  • Enabled - whether the input is enabled.

  • Id - renders as the id attribute on the <input /> element, so you can attach a <label for=""> to the input.

  • InputMode - 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.

  • Label - the label element rendered next to the input to provide the user with information on its purpose. It covers the input in a fashion similar to a placeholder, and animates up on focus. If you don't want this effect or the height increase it causes, use the Id parameter to attach your own <label> tag.

  • Name - the name attribute of the HTML element. It is usually required so the AutoComplete will be honored by the browser.

  • Password - 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 - 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 - 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 - maps to the title attribute of the HTML element. You can use it to add a tooltip.

  • Value - get/set the value of the input, can be used for binding.

  • Width - the width of the input. See the Dimensions article.

  • Validation - see the Input Validation article.

See Also

In this article
Not finding the help you need? Improve this article