Tabs
A set of layered sections of content displayed one at a time
Examples
Line variant (default)
Make changes to your account here. Click save when you are done.
Line variant with icons
Manage your account details, profile information, and preferences.
Soft-rounded variant
Overview of your project metrics and status.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Tabs | Root of the tabs control. Holds the active tab Value, coordinates its TabsTrigger and TabsContent children via a cascading value, and raises OnTabChanged when the selection changes. |
| TabsList | Horizontal bar that holds the TabsTrigger buttons. Draws the bottom border for the line variant. |
| TabsTrigger | Clickable tab button. Sets the parent Tabs.Value to its own Value when pressed. |
| TabsContent | Panel that only renders when the parent Tabs.Value matches its own Value. |
Tabs
Root of the tabs control. Holds the active tab Value, coordinates its TabsTrigger and TabsContent children via a cascading value, and raises OnTabChanged when the selection changes.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | The active tab's value. Use with ValueChanged or @bind-Value for controlled tabs. | |
| ValueChanged | EventCallback<string?> | Invoked when the active tab changes. Use with @bind-Value for two-way binding. | |
| DefaultValue | string? | Initial active tab value when Value is not bound. Applied on first render only. | |
| OnTabChanged | EventCallback<string?> | Fires when the active tab changes to a different value (not on the initial render). | |
| ClassName | string? | Extra CSS classes appended to the outer container. | |
| ChildContent | RenderFragment? | Must contain a TabsList and one or more TabsContent entries. |
TabsList
Horizontal bar that holds the TabsTrigger buttons. Draws the bottom border for the line variant.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | TabsVariant | Visual style. Default: TabsVariant.Line (underline). Other value: SoftRounded (pill background). Match the variant on the triggers. | |
| ClassName | string? | Extra CSS classes appended to the list container. | |
| ChildContent | RenderFragment? | TabsTrigger children. |
TabsTrigger
Clickable tab button. Sets the parent Tabs.Value to its own Value when pressed.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string | Identifier matched against the parent Tabs.Value. Pair with a TabsContent using the same value. | |
| Variant | TabsVariant | Visual style. Default: TabsVariant.Line. Must match the TabsList variant. | |
| Disabled | bool | When true, the trigger is non-interactive and visually muted. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the <button>. | |
| ChildContent | RenderFragment? | Trigger label — usually text, optionally with a leading Icon. |
TabsContent
Panel that only renders when the parent Tabs.Value matches its own Value.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string | Identifier matched against the parent Tabs.Value. Pair with a TabsTrigger using the same value. | |
| ClassName | string? | Extra CSS classes appended to the panel. | |
| ChildContent | RenderFragment? | The panel's content. |