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

TabStrip Events

Updated on Mar 25, 2026

This article explains the events available in the Telerik TabStrip for Blazor:

ActiveTabIdChanged
ActiveTabIndexChanged
OnStateChanged
OnStateInit
OnTabReorder

ActiveTabIdChanged

The ActiveTabIdChanged event was added in version 9.0.0. It fires when the user changes the active tab. The event handler receives the new tab ID of type string as an argument. If the Id parameter of the TabStripTab is not set, the component will generate one automatically.

The ActiveTabIdChanged event is designed to work with the new ActiveTabId parameter. Update the ActiveTabId parameter value manually in the ActiveTabIdChanged handler.

Handle the TabStrip ActiveTabIdChanged event

<TelerikTabStrip ActiveTabId="@TabStripActiveTabId"
                 ActiveTabIdChanged="@TabStripActiveTabIdChanged">
    <TabStripTab Title="First" Id="tab1">
        First tab content. Click through the tabs.
    </TabStripTab>
    <TabStripTab Title="Second" Id="tab2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="tab3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<p>The current active tab is <code>@TabStripActiveTabId</code></p>

@code {
    private string TabStripActiveTabId { get; set; } = "tab1";

    private void TabStripActiveTabIdChanged(string newTabId)
    {
        TabStripActiveTabId = newTabId;
    }
}

ActiveTabIndexChanged

The ActiveTabIndexChanged event fires when the user selects another tab. The event handler receives the new zero-based index as an argument. Update the ActiveTabIndex parameter value manually in the ActiveTabIndexChanged handler.

If you programmatically remove the currently active tab, the ActiveTabIndexChanged event fires with index -1 as there is no selected tab anymore.

The ActiveTabIndexChanged event and ActiveTabIndex parameter will be deprecated in a future product version. Use the ActiveTabId parameter with ActiveTabIdChanged event instead.

Handle the TabStrip ActiveTabIndexChanged event

<TelerikTabStrip ActiveTabIndex="@TabStripActiveTabIndex"
                 ActiveTabIndexChanged="@TabStripActiveTabIndexChanged">
    <TabStripTab Title="First">
        First tab content. Click through the tabs.
    </TabStripTab>
    <TabStripTab Title="Second">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<p>The current tab index is <code>@TabStripActiveTabIndex</code></p>

@code {
    private int TabStripActiveTabIndex { get; set; }

    private void TabStripActiveTabIndexChanged(int newTabIndex)
    {
        TabStripActiveTabIndex = newTabIndex;
    }
}

If you do not update the ActiveTabIndex parameter value in the ActiveTabIndexChanged handler, the selected tab will not change, so the event will be cancelled.

Cancel the ActiveTabIndexChanged event

<TelerikTabStrip ActiveTabIndex="@TabStripActiveTabIndex"
                 ActiveTabIndexChanged="@TabStripActiveTabIndexChanged">
    <TabStripTab Title="First">
        First tab content. Click through the tabs.
    </TabStripTab>
    <TabStripTab Title="Second">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<p>The current tab index is <code>@TabStripActiveTabIndex</code></p>

@code {
    private int TabStripActiveTabIndex { get; set; }

    private void TabStripActiveTabIndexChanged(int newTabIndex)
    {
        if (newTabIndex != 2)
        {
            TabStripActiveTabIndex = newTabIndex;
        }
    }
}

OnStateChanged

The OnStateChanged event fires whenever the user interacts with the TabStrip and changes the active tab, visible tabs, pinned tabs, and tab order.

The event handler receives a TabStripStateEventArgs argument with a TabStripState property. Read more details in the State Management article.

Handle the TabStrip OnStateChanged event

<TelerikTabStrip @bind-ActiveTabId="@ActiveTabId"
                 OnStateChanged="@OnTabStripStateChanged">
    <TabStripTab Title="First" Id="tab1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="tab2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="tab3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<p><strong>Active tab ID:</strong> @ActiveTabId</p>

<h4>Tab change history:</h4>
<ul>
    @foreach (var item in TabHistory)
    {
        <li>@item</li>
    }
</ul>

@code {
    private string ActiveTabId { get; set; } = string.Empty;
    private List<string> TabHistory { get; set; } = new();

    private void OnTabStripStateChanged(TabStripStateEventArgs args)
    {
        ActiveTabId = args.TabStripState.ActiveTabId;

        TabHistory.Insert(0, $"{DateTime.Now:HH:mm:ss} → {ActiveTabId}");
    }
}

OnStateInit

The OnStateInit event fires once when the TabStrip initializes. Unlike other Telerik Blazor components where OnStateInit fires early in the component lifecycle, the TabStrip fires it during OnAfterRenderAsync on the first render. This later timing is required so the component can detect which tabs are overflowing before the initial state is reported.

Use this event to inspect, customize, or restore the initial state of the TabStrip—for example, from a persistent storage.

The event handler receives a TabStripStateEventArgs argument with a TabStripState property. Read more details in the State Management article.

Handle the TabStrip OnStateInit event

<TelerikTabStrip ActiveTabId="@TabStripActiveTabId"
                 ActiveTabIdChanged="@OnActiveTabIdChanged"
                 OnStateInit="@OnTabStripStateInit">
    <TabStripTab Title="First" Id="tab1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="tab2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="tab3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string TabStripActiveTabId { get; set; } = "tab1";

    private void OnActiveTabIdChanged(string newTabId)
    {
        TabStripActiveTabId = newTabId;
    }

    private void OnTabStripStateInit(TabStripStateEventArgs args)
    {
        // For example, restore the active tab from a persistence storage.
        string restoredTabId = RestoreActiveTabIdFromStorage();

        // Update both the state and the bound parameter to keep them in sync.
        args.TabStripState.ActiveTabId = restoredTabId;
        TabStripActiveTabId = restoredTabId;
    }

    private string RestoreActiveTabIdFromStorage()
    {
        // Replace with actual persistence logic.
        return "tab2";
    }
}

OnTabReorder

The OnTabReorder event fires when the user completes a drag-and-drop tab reorder. To enable tab reordering, set the EnableTabReorder parameter on the TabStrip to true. The event handler receives a TabStripTabReorderEventArgs argument.

Handle the TabStrip OnTabReorder event

<TelerikTabStrip ActiveTabId="@TabStripActiveTabId"
                 ActiveTabIdChanged="@OnActiveTabIdChanged"
                 EnableTabReorder="true"
                 OnTabReorder="@OnTabReorder">
    <TabStripTab Title="First" Id="1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="3">
        Third tab content.
    </TabStripTab>
    <TabStripTab Title="Fourth" Id="4">
        Fourth tab content.
    </TabStripTab>
</TelerikTabStrip>

<p>Active tab: <code>@TabStripActiveTabId</code></p>
<p>Last reorder: @ReorderLog</p>

@code {
    private string TabStripActiveTabId { get; set; } = "tab1";
    private string ReorderLog { get; set; } = string.Empty;

    private void OnActiveTabIdChanged(string newTabId)
    {
        TabStripActiveTabId = newTabId;
    }

    private void OnTabReorder(TabStripTabReorderEventArgs args)
    {
        ReorderLog = $"Tab {args.Id} moved to index {args.Position}.";
    }
}

The OnStateChanged event also fires after a tab reorder. Read more in the State Management article.