Tabs & accordion
TabControl · TabStripControl · AccordionControlThree ways to show one section at a time: tabs with their own panes, a bare tab strip you wire up yourself, and stacked headers that expand.
Overview
TabControl owns its content: each TabItem declares a header and a pane, and SelectedIndex binds
two ways. TabStripControl is the header row alone, driven by a list of TabStripItems with icons, disabled
and closable tabs, for cases where the content lives elsewhere, such as open documents or routes. AccordionControl stacks
AccordionItemControl headers and expands one at a time, or several with Multiple.
Examples
#Tab control
Panes are declared inline; only the selected one renders, so the Lines table is not in the page until its tab is chosen. The TabItems wrapper is optional.
- Estimate
- EST-2042 Contoso kitchen
- Status
- Draft, 14 lines
- Total
- $12,480
Tab 1 of 3 selected
#Tab strip
The strip renders headers only; the page shows the selected item's Tag underneath. Closable tabs raise OnTabClose with the index and the page removes the item. A disabled tab ignores clicks.
#Accordion
Multiple="true" lets several sections stay open; without it, opening one closes the rest. InitiallyExpanded opens a section on first render and Disabled greys its header.
Documentation
TabControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
SelectedIndex | int | 0 | Index of the visible pane. Two-way with @bind-SelectedIndex. |
SelectedIndexChanged | EventCallback<int> | — | Fires when a different header is clicked. |
ChildContent | RenderFragment? | — | TabItems, optionally inside a TabItems wrapper. Order follows declaration. |
CssClass | string? | null | Appended to the fx-tabs root. There is no Style; this control does not derive from FlexControlBase. |
TabItem parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
HeaderText | string | "" | Header button label. |
Content | RenderFragment? | null | Pane markup; takes precedence over child content. |
ChildContent | RenderFragment? | null | Pane markup when Content is not set. |
TabStripControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Items | List<TabStripItem> | empty | Tabs, in order. |
SelectedIndex | int | 0 | Active tab. Two-way with @bind-SelectedIndex. Not clamped when items are removed; clamp it yourself. |
SelectedIndexChanged | EventCallback<int> | — | Fires on a click on an enabled tab. |
OnTabClose | EventCallback<int> | — | Fires with the index when a closable tab's × is clicked. The strip does not remove the item. |
CssClass | string? | null | Appended to the fx-tabstrip root. Not a FlexControlBase control. |
TabStripItem
| Property | Type | Default | Description |
|---|---|---|---|
Text | string | "" | Label. |
IconCss | string? | null | Leading icon classes. |
Closable | bool | false | Shows the × button. |
Disabled | bool | false | Greys the tab and ignores clicks. |
Tag | object? | null | Anything the page wants to carry with the tab. |
ctor | | — | new(text, iconCss, closable) or an object initialiser. |
AccordionControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Multiple | bool | false | true keeps several items open; false closes the others when one opens. |
ChildContent | RenderFragment? | — | AccordionItemControls. |
CssClass / Style (base) | string? | null | On the fx-accordion root. |
AccordionItemControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Title | string? | null | Header text when HeaderContent is not set. |
IconCss | string? | null | Icon before the title. |
Disabled | bool | false | Disables the header button. |
InitiallyExpanded | bool | false | Open on first render. In single mode the last such item wins. |
HeaderContent | RenderFragment? | null | Replaces icon and title inside the header button; the arrow stays. |
ChildContent | RenderFragment? | null | Body, rendered only while expanded. |
Expanded (read-only) | bool | — | Current state, asked of the parent. |
CSS classes
| Class | Effect |
|---|---|
fx-tabs · fx-tab-headers · fx-tab-button (.active) · fx-tab-content | Tab control root, header row, header buttons and the bordered pane. |
fx-tabstrip · fx-tabstrip-tab (-active, -disabled) · fx-tabstrip-icon · fx-tabstrip-text · fx-tabstrip-close | Strip row with a bottom border, each tab with a 2px active underline, its icon, text and × button. |
fx-accordion · fx-accordion-item (.fx-accordion-expanded, .fx-accordion-disabled) | Rounded bordered stack and each item; the expanded class rotates the arrow. |
fx-accordion-header · -icon · -title · -arrow · -body | Header button and its parts; the body carries the padding. |
CSS variables (TabStripControl only)
| Variable | Fallback | Purpose |
|---|---|---|
--fx-tab-bg · --fx-tab-color · --fx-text-color | #f9fafb · #6b7280 · #1f2937 | Strip background, resting and hover text. |
--fx-tab-active-color · --fx-tab-active-border-color · --fx-tab-active-bg | #1b6ec2 · #1b6ec2 · transparent | Active tab text, underline and fill. |
--fx-border-color · --fx-sidebar-item-hover-bg · --fx-text-muted | #e5e7eb · #f3f4f6 · #d1d5db | Strip bottom border, hover fill, disabled text. |
--fx-font-size · --fx-zoom | 13px · 1 | Tab font size and zoom factor. |
(none) | — | TabControl and the accordion read no variables; their colours are fixed in the stylesheets. |
Keyboard and accessibility
TabControlheaders are native buttons: Tab moves between them and Enter or Space selects. There are notablist,tabortabpanelroles and no arrow-key handling.TabStripControltabs are<div>s with click handlers only; they are not keyboard-focusable. UseTabControlwhere keyboard access matters.- Each accordion header is a button with
aria-expanded; the body is arole="region". A disabled header is a disabled button.