Tabs
Accessible tabbed interfaces following the WAI-ARIA Tabs pattern with full keyboard navigation.
Default Tabs
This is the overview panel. It provides a high-level summary of the product and its capabilities.
With Disabled Tab
This is the overview panel. The Features tab is disabled and cannot be selected.
Controlled Tabs
Content for the first controlled tab.
Current active tab: controlled1
Many Tabs
Your main dashboard with an overview of key metrics and recent activity.
Accessibility Notes
The Tabs component follows the WAI-ARIA Tabs pattern for full accessibility support:
- Arrow keys move focus between tabs in the tab list. Left and Right arrows navigate horizontally through the available tabs.
- Home and End keys jump focus to the first and last tab in the tab list respectively.
- Tab key moves focus from the active tab into the associated tab panel content, allowing keyboard users to access the panel.
aria-selectedindicates the currently active tab, ensuring screen readers announce the selected state to users.