Tabs

Guidelines
React API Reference
Blazor API Reference

Tabs organize content into separate views that users can navigate between without leaving the page. They allow for efficient space utilization and provide a clear way to present related but distinct sections of content.

Guidance

Aspect	Best Practice
Usage	Use tabs to organize related content into distinct sections that users can easily navigate between. Ideal for presenting alternative views of similar content.
Content	Keep tab labels short and descriptive. Ensure content within each tab is cohesive and logically grouped. Avoid too many tabs (typically 2-7).
Behavior	Only one tab should be active at a time. Switching tabs should be immediate with clear visual feedback. Maintain content state when switching tabs.
States	Clearly indicate active, hover, and disabled states. The active tab should be visually connected to its content panel.
Feedback	Provide immediate visual feedback when tabs are selected. Ensure smooth transitions between tab content when appropriate.
Examples	Form sections, product details, settings categories, or dashboard views.

Best Practices

Descriptive Labels: Use clear, concise labels that accurately describe the tab content.
Visual Hierarchy: Make the active tab visually distinct and connected to its content.
Consistent Content Structure: Maintain similar structure across tab panels to avoid jarring changes.
Appropriate Number: Limit the number of tabs to avoid overwhelming users (typically 2-7 tabs).
Content Preservation: Preserve user input and scroll position when switching between tabs.

Do’s and Don’ts

Do

Use for content that can be clearly divided into distinct sections.
Keep tab labels concise and descriptive.
Ensure tabs are keyboard accessible.
Maintain a consistent structure across tab panels.

Don't

Use tabs for sequential processes (use a stepper instead).
Create too many tabs that crowd the interface.
Hide critical content behind tabs without clear indicators.
Use tabs when content needs to be compared side-by-side.

Additional Guidance

Psychological Impact:
- Cognitive Organization: Tabs help users mentally categorize information into distinct sections.
- Perceived Simplicity: Breaking complex interfaces into tabbed sections makes them feel more manageable.
- Spatial Memory: Users can build a mental map of content organization through consistent tab patterns.

Import

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent
} from '@strongtie/design-system/tabs';

Usage

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
</Tabs>

`<Tabs>` Props

asChild

boolean

If true, the component will render as a child of the parent component.

defaultValue

string

The value of the tab that should be active when initially rendered.

value

string

The controlled value of the active tab. Should be used with onValueChange.

onValueChange

function

Callback that fires when the active tab is changed.

orientation

"horizontal" | "vertical"

The orientation of the tabs.

dir

"ltr" | "rtl"

The direction of the tabs.

activationMode

"manual" | "automatic"

The activation mode of the tabs.

`<TabsList>` Props

asChild

boolean

If true, the component will render as a child of the parent component.

loop

boolean

default:"true"

If true, the tabs will loop when navigating.

`<TabsTrigger>` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the trigger with a content panel.

disabled

boolean

When true, prevents the user from interacting with the tab.

`<TabsContent>` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the content with a trigger.

forceMount

boolean

Used to force mounting when more control is needed.

Styling Classes

The following CSS classes are applied by the Tabs components:

tabs-list – Tab navigation list container
tabs-trigger – Individual tab trigger/button
tabs-content – Tab content panel

For more examples, visit the Storybook.

Example

<StudsTabs>
    <Tabs>
        <StudsTabsItem Text="Customers">
            Customers content
        </StudsTabsItem>
        <StudsTabsItem Text="Orders">
            Orders content
        </StudsTabsItem>
        <StudsTabsItem Text="Order Details">
            Order details content
        </StudsTabsItem>
    </Tabs>
</StudsTabs>

`StudsTabs` Parameters

RenderMode

TabRenderMode

default:"TabRenderMode.Server"

Gets or sets the render mode for the tabs. Can be either Server or Client.

SelectedIndex

int

default:"-1"

Gets or sets the index of the selected tab.

SelectedIndexChanged

EventCallback<int>

Gets or sets the callback that is invoked when the selected index changes.

Change

EventCallback<int>

Gets or sets the callback that is invoked when a tab selection changes.

Tabs

RenderFragment

Gets or sets the tab items to be displayed.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsTabsItem` Parameters

Text

string

Gets or sets the text content of the tab.

Icon

string

Gets or sets the icon for the tab.

IconColor

string

Gets or sets the color of the tab icon.

Selected

bool

default:"false"

Gets or sets whether this tab is selected.

Disabled

bool

default:"false"

Gets or sets whether this tab is disabled.

Visible

bool

default:"true"

Gets or sets whether this tab is visible.

Template

RenderFragment<StudsTabsItem>

Gets or sets custom template content for the tab.

ChildContent

RenderFragment

Gets or sets the content to be displayed when the tab is selected.

Attributes

IDictionary<string, object>

Gets or sets the arbitrary attributes.

Style

string

Gets or sets the style.

Styling Classes

The following CSS classes are applied by the Tabs components:

tabview – Base tabs container
tabview-nav – Tab navigation list
tabview-panels – Tab content panels container
tabview-panel – Individual tab content panel

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<Tabs>` Props

`<TabsList>` Props

`<TabsTrigger>` Props

`<TabsContent>` Props

Styling Classes

`StudsTabs` Parameters

`StudsTabsItem` Parameters

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<Tabs> Props

​<TabsList> Props

​<TabsTrigger> Props

​<TabsContent> Props

​Styling Classes

​StudsTabs Parameters

​StudsTabsItem Parameters

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<Tabs>` Props

`<TabsList>` Props

`<TabsTrigger>` Props

`<TabsContent>` Props

Styling Classes

`StudsTabs` Parameters

`StudsTabsItem` Parameters

Styling Classes