Tabs Primitive
Headless, unstyled tabs primitive with full keyboard navigation and accessibility support.
Basic Usage
A simple tabs implementation with minimal inline styles. Use arrow keys to navigate between tabs.
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
In manual mode, tabs must be clicked or activated with Enter/Space. Arrow keys only move focus.
Overview
Use arrow keys to move focus, then press Enter or Space to activate a tab.
Disabled Tab
Tabs can be disabled. Keyboard navigation will skip over disabled tabs.
First enabled tab content. Try using arrow keys - they'll skip the disabled tab.
Accessibility Features
Keyboard Navigation
- Tab - Focus the tab list
- Arrow Left/Right - Navigate between tabs (horizontal)
- Arrow Up/Down - Navigate between tabs (vertical)
- Home - Jump to first tab
- End - Jump to last tab
- Enter/Space - Activate focused tab (manual mode)
ARIA Attributes
role="tablist"on the tabs listrole="tab"on each tab triggerrole="tabpanel"on each tab contentaria-selectedindicates the active tabaria-controlslinks trigger to content panelaria-labelledbylinks content to triggeraria-orientationindicates horizontal or vertical layout