Tabs Primitive
Headless, unstyled tabs primitive with full keyboard navigation and accessibility support.
Basic Usage
A simple tabs implementation with minimal inline styles.
Tab 1 Content
This is the content for the first tab. Navigate using arrow keys or click to switch tabs.
Controlled Tabs
Control the active tab from your component code using @bind-Value.
Current tab: account
Account Settings
Make changes to your account here.
Vertical Tabs
Tabs can be arranged vertically. Use arrow up/down keys to navigate.
General Settings
Configure general application settings.
Manual Activation Mode
Arrow keys move focus only; Enter/Space activates tabs.
Overview
Use arrow keys to move focus, then press Enter or Space to activate a tab.
Disabled Tab
Disabled tabs are skipped in keyboard navigation.
First enabled tab content.
Accessibility Features
Built-in accessibility features following WAI-ARIA patterns.
Included by default
role="tablist", role="tab", role="tabpanel", roving focus, and orientation-aware keyboard navigation.
Keyboard Shortcuts
Navigate and interact with tabs using keyboard.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | string? | — | Active tab value (controlled mode). |
| ValueChanged | EventCallback<string> | — | Callback invoked when active tab changes. |
| DefaultValue | string? | — | Initial active tab (uncontrolled mode). |
| Orientation | TabsOrientation | Horizontal | Layout orientation for keyboard navigation semantics. |
| ActivationMode | TabsActivationMode | Automatic | Whether focus auto-activates tabs or requires Enter/Space. |
| Disabled | bool | false | Disables an individual tab trigger. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Tabs Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Custom keyboard/focus UX requirements
Use Styled Component
- ●Need quick implementation
- ●Prefer default shadcn/ui look
- ●Convention over configuration