Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Basic

A basic tabs component with multiple panels.

Account

Make changes to your account here. Click save when you're done.

Name

Username

<Tabs DefaultValue="account">
    <TabsList>
        <TabsTrigger Value="account">Account</TabsTrigger>
        <TabsTrigger Value="password">Password</TabsTrigger>
    </TabsList>
    <TabsContent Value="account">
        <p>Account settings content...</p>
    </TabsContent>
    <TabsContent Value="password">
        <p>Password settings content...</p>
    </TabsContent>
</Tabs>

Controlled

Control the active tab programmatically.

Overview content goes here.

Active tab: overview

<Tabs @bind-Value="activeTab">
    <TabsList>
        <TabsTrigger Value="overview">Overview</TabsTrigger>
        <TabsTrigger Value="analytics">Analytics</TabsTrigger>
    </TabsList>
    <TabsContent Value="overview">...</TabsContent>
    <TabsContent Value="analytics">...</TabsContent>
</Tabs>

@code {
    private string activeTab = "overview";
}