Blazorise Tab component

Organize related content into panels that users can switch between.

Use tabs for sections such as account settings or record details that users need in the same place but do not need to view together.

Structure

The Tabs component uses an Items fragment for selectable tabs and a Content fragment for their panels.

  • <Tabs>Coordinates the selected tab and its panel.
    • <Items>The named fragment containing tab controls.
      • <Tab>A selectable tab.
    • <Content>The named fragment containing the tab panels.
      • <TabPanel>The content associated with a tab.

Give each Tab and its TabPanel the same Name. Use SelectedTab to set the initial selection, or bind it to keep selection in sync with your application state.

Usually, tabs and panels belong together inside Tabs. To render panels elsewhere, use <TabsContent> and bind its SelectedPanel to the same value as Tabs.SelectedTab.

Examples

Basic

Match each tab and panel by Name. This example starts on Profile and updates SelectedTab through SelectedTabChanged when another tab is selected.
Your profile

Your profile helps teammates recognize you and find the right person to contact. It includes your display name, role, and a short introduction to your work.

Keep your contact details up to date and include the projects or topics you can help with. A clear introduction makes it easier for new team members to get in touch. 

<Tabs SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged" AriaLabel="Account overview">
    <Items>
        <Tab Name="home">Home</Tab>
        <Tab Name="profile">Profile</Tab>
        <Tab Name="messages">Messages</Tab>
        <Tab Name="settings">Settings</Tab>
    </Items>
    <Content>
        <TabPanel Name="home" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Welcome back</Heading>
            <Paragraph>
                Your account brings together your profile, conversations, and preferences. Use these tabs to explore
                each section without leaving the page.
            </Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">
                Start by reviewing your profile, catch up on messages from your team, or adjust your settings to suit
                the way you work.
            </Paragraph>
        </TabPanel>
        <TabPanel Name="profile" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Your profile</Heading>
            <Paragraph>
                Your profile helps teammates recognize you and find the right person to contact. It includes your
                display name, role, and a short introduction to your work.
            </Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">
                Keep your contact details up to date and include the projects or topics you can help with. A clear
                introduction makes it easier for new team members to get in touch.
            </Paragraph>
        </TabPanel>
        <TabPanel Name="messages" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Team messages</Heading>
            <Paragraph>
                Conversations keep project updates and questions in one place. Review recent discussions to see
                what has changed and where your team needs your input.
            </Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">
                Give each conversation a descriptive subject so teammates can find it later. Keep replies in the
                same thread to preserve the context of a decision.
            </Paragraph>
        </TabPanel>
        <TabPanel Name="settings" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Account settings</Heading>
            <Paragraph>
                Preferences let you tailor your account to your daily routine. Choose how you receive notifications
                and which updates deserve your attention.
            </Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">
                Review these choices as your responsibilities change. Keeping only the notifications you need can
                help you stay informed while reducing interruptions.
            </Paragraph>
        </TabPanel>
    </Content>
</Tabs>

@code {
    string selectedTab = "profile";

    private Task OnSelectedTabChanged( string name )
    {
        selectedTab = name;

        return Task.CompletedTask;
    }
}

Vertical

Set TabPosition="TabPosition.Start" to place tabs beside their content. Add Pills for a filled selection style. This example includes icons and a disabled tab.
Your profile

Your profile helps teammates recognize you and learn about your work.

Keep your name, role, and contact details up to date so the right people can reach you.

<Tabs @bind-SelectedTab="selectedTab" TabPosition="TabPosition.Start" Pills Gap="Gap.Is2" AriaLabel="Account sections">
    <Items>
        <Tab Name="profile">
            <Icon Name="IconName.UserCircle" Margin="Margin.Is2.FromEnd" />
            Profile
        </Tab>
        <Tab Name="dashboard">
            <Icon Name="IconName.ChartBar" Margin="Margin.Is2.FromEnd" />
            Dashboard
        </Tab>
        <Tab Name="settings">
            <Icon Name="IconName.Settings" Margin="Margin.Is2.FromEnd" />
            Settings
        </Tab>
        <Tab Name="contact">
            <Icon Name="IconName.Headset" Margin="Margin.Is2.FromEnd" />
            Contact
        </Tab>
        <Tab Name="disabled" Disabled>
            <Icon Name="IconName.TimesCircle" Margin="Margin.Is2.FromEnd" />
            Disabled
        </Tab>
    </Items>
    <Content>
        <TabPanel Name="profile" Background="Background.Light" TextColor="TextColor.Dark" Border="Border.Rounded" Padding="Padding.Is4" Height="Height.Px().Min( 280 )">
            <Heading Size="HeadingSize.Is5">Your profile</Heading>
            <Paragraph>Your profile helps teammates recognize you and learn about your work.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Keep your name, role, and contact details up to date so the right people can reach you.</Paragraph>
        </TabPanel>
        <TabPanel Name="dashboard" Background="Background.Light" TextColor="TextColor.Dark" Border="Border.Rounded" Padding="Padding.Is4" Height="Height.Px().Min( 280 )">
            <Heading Size="HeadingSize.Is5">Your dashboard</Heading>
            <Paragraph>See recent activity and keep track of the projects that need your attention.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Review updates from your team and plan your next tasks in one place.</Paragraph>
        </TabPanel>
        <TabPanel Name="settings" Background="Background.Light" TextColor="TextColor.Dark" Border="Border.Rounded" Padding="Padding.Is4" Height="Height.Px().Min( 280 )">
            <Heading Size="HeadingSize.Is5">Account settings</Heading>
            <Paragraph>Choose the notifications and preferences that fit the way you work.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Review these choices as your responsibilities change to keep updates useful.</Paragraph>
        </TabPanel>
        <TabPanel Name="contact" Background="Background.Light" TextColor="TextColor.Dark" Border="Border.Rounded" Padding="Padding.Is4" Height="Height.Px().Min( 280 )">
            <Heading Size="HeadingSize.Is5">Get in touch</Heading>
            <Paragraph>Contact your support team for help with your account or a question about the service.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Include a short description of what you need so your request reaches the right person.</Paragraph>
        </TabPanel>
    </Content>
</Tabs>

@code {
    private string selectedTab = "profile";
}

Lazy Load

TabsRenderMode.LazyLoad creates each panel's content on its first visit and keeps it afterward. Enter values below and switch tabs to see how the inputs retain their state.

Enter contact details, visit Notes, then return. Your entries stay in place.

<Tabs RenderMode="TabsRenderMode.LazyLoad" SelectedTab="contact" AriaLabel="Contact details with lazy loading">
    <Items>
        <Tab Name="contact">Contact</Tab>
        <Tab Name="notes">Notes</Tab>
    </Items>
    <Content>
        <TabPanel Name="contact" Focusable="false" Padding="Padding.Is3">
            <Paragraph>Enter contact details, visit Notes, then return. Your entries stay in place.</Paragraph>
            <Field>
                <FieldLabel>Full name</FieldLabel>
                <FieldBody>
                    <TextInput Placeholder="e.g. Alex Morgan" />
                </FieldBody>
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Email address</FieldLabel>
                <FieldBody>
                    <TextInput Role="TextRole.Email" Placeholder="e.g. alex@example.com" />
                </FieldBody>
            </Field>
        </TabPanel>
        <TabPanel Name="notes" Focusable="false" Padding="Padding.Is3">
            <Paragraph>This form is created on your first visit and kept when you switch tabs.</Paragraph>
            <Field>
                <FieldLabel>Subject</FieldLabel>
                <FieldBody>
                    <TextInput Placeholder="e.g. Project introduction" />
                </FieldBody>
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Notes</FieldLabel>
                <FieldBody>
                    <MemoInput Rows="3" Placeholder="Add a few details to discuss with this contact." />
                </FieldBody>
            </Field>
        </TabPanel>
    </Content>
</Tabs>

Lazy Reload

TabsRenderMode.LazyReload renders only the active panel's content and recreates it on each visit. These inputs keep their values locally, so switching tabs clears them. Bind values to parent state when they need to persist.

Enter contact details, visit Notes, then return. The inputs are recreated and your entries are cleared.

<Tabs RenderMode="TabsRenderMode.LazyReload" SelectedTab="contact" AriaLabel="Contact details with lazy reloading">
    <Items>
        <Tab Name="contact">Contact</Tab>
        <Tab Name="notes">Notes</Tab>
    </Items>
    <Content>
        <TabPanel Name="contact" Focusable="false" Padding="Padding.Is3">
            <Paragraph>Enter contact details, visit Notes, then return. The inputs are recreated and your entries are cleared.</Paragraph>
            <Field>
                <FieldLabel>Full name</FieldLabel>
                <FieldBody>
                    <TextInput Placeholder="e.g. Alex Morgan" />
                </FieldBody>
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Email address</FieldLabel>
                <FieldBody>
                    <TextInput Role="TextRole.Email" Placeholder="e.g. alex@example.com" />
                </FieldBody>
            </Field>
        </TabPanel>
        <TabPanel Name="notes" Focusable="false" Padding="Padding.Is3">
            <Paragraph>Only the active panel's content is rendered. These inputs also start empty each time you return.</Paragraph>
            <Field>
                <FieldLabel>Subject</FieldLabel>
                <FieldBody>
                    <TextInput Placeholder="e.g. Project introduction" />
                </FieldBody>
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Notes</FieldLabel>
                <FieldBody>
                    <MemoInput Rows="3" Placeholder="Add a few details to discuss with this contact." />
                </FieldBody>
            </Field>
        </TabPanel>
    </Content>
</Tabs>

Accessibility

Naming the Group

Screen readers can announce a name for the whole group. For example, set AriaLabel="Account settings" on Tabs. To use an existing visible heading instead, set AriaLabelledBy to that heading's ID.

Keyboard Navigation

Press Tab to reach the selected tab, then use the left and right arrow keys to move between tabs. Vertical tabs use the up and down arrow keys instead. Disabled tabs are skipped. Home and End move to the first and last available tabs. Press Enter or Space to open the chosen tab. Arrow keys alone do not change the displayed content.

Panel Focus

By default, pressing Tab after the selected tab moves to the open panel, where users can read or scroll its content. Set Focusable="false" on TabPanel to skip the panel itself. Buttons, links, and form controls inside it remain reachable with Tab.

Best Practices

Group Peer Content

Tabs are suited to a small set of peer sections within the same context, not sequential steps or unrelated destinations. Keep labels short, distinct, and ordered according to user needs. Information required to understand or complete the current task should not be hidden only in an inactive tab.

Loading Behavior

Preserve panel state when users are likely to switch between tabs while comparing or entering information. Reload content only when freshness is more important than continuity, and make any resulting loading state clear.

Clear Labels

Use short, descriptive labels so users know what each tab contains. Give the group a name that explains its purpose to screen reader users.

Keyboard Access

Keep the focus highlight visible so users can see which tab they are about to open. Keep panels reachable by keyboard when they contain introductory text or need scrolling. Skip the panel itself only when users can go straight to its controls without missing useful content.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page