New to Telerik UI for Blazor? Download free 30-day trial

Focus TextBox Programmatically


Product Version 2.25.0 and later


How do I focus a Blazor TelerikTextBox or any other input component programmatically?


The Telerik textboxes and inputs offer a FocusAsync method that lets you focus them with code.

The example below showcases it for a few of them, but it is available for all input components and buttons:

  • AutoComplete
  • Button
  • ComboBox
  • CheckBox
  • DateInput
  • DatePicker
  • DateRangePicker
  • DateTimePicker
  • DropDownList
  • Editor
  • MaskedTextBox
  • MultiSelect
  • NumericTextBox
  • TextArea
  • TextBox
  • TimePicker

Focus input with code

    async Task FocusTextbox()
        await TextboxRef.FocusAsync();

    async Task FocusNumericTextbox()
        await NumericTextboxRef.FocusAsync();

    async Task FocusDropdown()
        await DropdownRef.FocusAsync();

<TelerikButton OnClick="@FocusTextbox">Focus textbox</TelerikButton>
<TelerikButton OnClick="@FocusNumericTextbox">Focus numeric textbox</TelerikButton>
<TelerikButton OnClick="@FocusDropdown">Focus dropdown</TelerikButton>

<TelerikTextBox @ref="@TextboxRef" @bind-Value="@TextoboxValue"></TelerikTextBox>
<TelerikNumericTextBox @ref="@NumericTextboxRef" @bind-Value="@NumericTextoboxValue"></TelerikNumericTextBox>
<TelerikDropDownList @ref="@DropdownRef" @bind-Value="@DropdownValue" Data="@DropdownData"></TelerikDropDownList>

    TelerikTextBox TextboxRef { get; set; }
    TelerikNumericTextBox<int> NumericTextboxRef { get; set; }
    TelerikDropDownList<string, string> DropdownRef { get; set; }

    string TextoboxValue { get; set; } = "lorem ipsum";
    int NumericTextoboxValue { get; set; } = 123;
    string DropdownValue { get; set; } = "one";
    List<string> DropdownData { get; set; } = new List<string>() { "one", "two", "three" };


  • The earliest reliable programmatic focus can occur in OnAfterRenderAsync and with some delay. The reason is that OnAfterRenderAsync is fired when the DOM tree is built, but before the HTML output is actually rendered in the browser. After the event is fired, the .NET runtime sends the HTML to the browser. The FocusAsync method relies on JSInterop, which in turn relies on the component to be rendered in the browser.

  • You can still use JavaScript to focus DOM elements by having a proper element reference or selector. The C# method is built on top of that. If you want more specific functionality (like selecting the text as well, a pure JS solution might be simpler).

In this article