SummitUI Logo SummitUI
Tabs
Component

Tabs

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

Demo

Account Settings

Manage your account information and preferences here.

Features

  • Full keyboard navigation
  • Horizontal and vertical orientations
  • Auto and manual activation modes
  • Controlled and uncontrolled modes
  • Disabled tabs support
  • WCAG compliant with proper ARIA attributes

Installation

bash
dotnet add package SummitUI

Anatomy

Import the components and structure them as follows:

razor
<TabsRoot DefaultValue="tab1">
    <TabsList>
        <TabsTrigger Value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger Value="tab2">Tab 2</TabsTrigger>
    </TabsList>
    <TabsContent Value="tab1">Content 1</TabsContent>
    <TabsContent Value="tab2">Content 2</TabsContent>
</TabsRoot>

Sub-components

TabsRoot

Root container managing tabs state.

TabsList

Container for tab triggers (tablist role).

TabsTrigger

Individual tab button (tab role).

TabsContent

Tab content panel (tabpanel role).

API Reference

TabsRoot

Property Type Default Description
Value string? null Controlled active tab value
DefaultValue string? null Default active tab (uncontrolled)
ValueChanged EventCallback<string?> - Value change callback
OnValueChange EventCallback<string?> - Tab activation callback
Orientation TabsOrientation Horizontal Affects keyboard navigation
ActivationMode TabsActivationMode Auto Auto (on focus) or Manual (on Enter/Space)
Loop bool true Whether keyboard nav loops

TabsList

Property Type Default Description
As string "div" HTML element

TabsTrigger

Property Type Default Description
Valuerequired string - Unique tab identifier
As string "button" HTML element
Disabled bool false Disable this tab

TabsContent

Property Type Default Description
Valuerequired string - Matching TabsTrigger value
As string "div" HTML element

Examples

Basic Usage

razor
<TabsRoot DefaultValue="account">
    <TabsList class="tabs-list">
        <TabsTrigger Value="account" class="tabs-trigger">Account</TabsTrigger>
        <TabsTrigger Value="password" class="tabs-trigger">Password</TabsTrigger>
    </TabsList>
    
    <TabsContent Value="account" class="tabs-content">
        <h3>Account Settings</h3>
        <p>Manage your account information here.</p>
    </TabsContent>
    <TabsContent Value="password" class="tabs-content">
        <h3>Password Settings</h3>
        <p>Change your password and security options.</p>
    </TabsContent>
</TabsRoot>

Vertical Orientation

Use vertical orientation for sidebar-style navigation.

razor
<TabsRoot DefaultValue="general" Orientation="TabsOrientation.Vertical">
    <div class="tabs-container-vertical">
        <TabsList class="tabs-list-vertical">
            <TabsTrigger Value="general">General</TabsTrigger>
            <TabsTrigger Value="privacy">Privacy</TabsTrigger>
            <TabsTrigger Value="security">Security</TabsTrigger>
        </TabsList>
        
        <div class="tabs-content-container">
            <TabsContent Value="general">General settings...</TabsContent>
            <TabsContent Value="privacy">Privacy settings...</TabsContent>
            <TabsContent Value="security">Security settings...</TabsContent>
        </div>
    </div>
</TabsRoot>

Controlled Mode

Control the active tab externally.

razor
@code {
    private string activeTab = "overview";
}

<TabsRoot Value="@activeTab" ValueChanged="@(v => activeTab = v)">
    <TabsList>
        <TabsTrigger Value="overview">Overview</TabsTrigger>
        <TabsTrigger Value="details">Details</TabsTrigger>
    </TabsList>
    
    <TabsContent Value="overview">Overview content...</TabsContent>
    <TabsContent Value="details">Details content...</TabsContent>
</TabsRoot>

<p>Active tab: @activeTab</p>
<button @onclick="@(() => activeTab = "details")">Go to Details</button>

Disabled Tabs

Disable specific tabs.

razor
<TabsRoot DefaultValue="active1">
    <TabsList>
        <TabsTrigger Value="active1">Active Tab</TabsTrigger>
        <TabsTrigger Value="disabled" Disabled="true">Disabled Tab</TabsTrigger>
        <TabsTrigger Value="active2">Another Active</TabsTrigger>
    </TabsList>
    
    <TabsContent Value="active1">This tab is accessible.</TabsContent>
    <TabsContent Value="disabled">This content is not accessible.</TabsContent>
    <TabsContent Value="active2">This tab is also accessible.</TabsContent>
</TabsRoot>

Styling

Data Attributes

Attribute Values Description
data-state "active" | "inactive" Tab/panel activation state
data-disabled Present when disabled Tab is disabled
data-orientation "horizontal" | "vertical" Current orientation

CSS Example

css
/* Tab list styles */
.tabs-list {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    gap: 4px;
}

/* Tab trigger styles */
.tabs-trigger {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
}

.tabs-trigger:hover {
    color: #333;
    background: #f5f5f5;
}

.tabs-trigger[data-state="active"] {
    color: #0066cc;
    border-bottom-color: #0066cc;
}

.tabs-trigger[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tab content styles */
.tabs-content {
    padding: 24px;
}

.tabs-content[data-state="inactive"] {
    display: none;
}

Accessibility

Keyboard Navigation

Key Action
ArrowRight / ArrowDown Move focus to next tab
ArrowLeft / ArrowUp Move focus to previous tab
Home Move focus to first tab
End Move focus to last tab
Enter / Space Activate focused tab (manual mode)

ARIA Attributes

  • TabsList: Has role="tablist" with aria-orientation
  • TabsTrigger: Has role="tab" with aria-selected and aria-controls
  • TabsContent: Has role="tabpanel" with aria-labelledby
An unhandled error has occurred. Reload X