BlazorUI Demo

Tabs

Tabs combine an accessible tab list, selectable tabs and matching panels under a shared value.

Uncontrolled tabs

Overview content

View code 
<BuiTabs DefaultValue="overview">
    <BuiTabList AriaLabel="Account sections"><BuiTab Value="overview">Overview</BuiTab><BuiTab Value="activity">Activity</BuiTab><BuiTab Value="disabled" Disabled>Disabled</BuiTab></BuiTabList>
    <BuiTabPanel Value="overview"><BuiText>Overview content</BuiText></BuiTabPanel>
    <BuiTabPanel Value="activity"><BuiText>Recent activity</BuiText></BuiTabPanel>
</BuiTabs>
Controlled selection
First panel
Selected: one
View code 
<BuiTabs @bind-Value="selectedTab">
    <BuiTabList AriaLabel="Controlled sections"><BuiTab Value="one">One</BuiTab><BuiTab Value="two">Two</BuiTab></BuiTabList>
    <BuiTabPanel Value="one">First panel</BuiTabPanel><BuiTabPanel Value="two">Second panel</BuiTabPanel>
</BuiTabs>
<BuiText Typo="Typo.Caption">Selected: @selectedTab</BuiText>

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