Size
Orientation
Basic Tabs
A simple tabs component with different content panels.
Overview
This is the overview tab content. It provides a general introduction to the topic.
Size Variations
Tabs component supports different sizes from xs to xl.
Size: xs
Size: sm
Size: md
Size: lg
Size: xl
Variants
Tabs can be rendered with different visual variants.
Variant: filled
Variant: light
Variant: outline
Variant: default
Variant: text
Vertical Orientation
Tabs can be displayed vertically for sidebar-style navigation.
Overview
This is the overview tab content. It provides a general introduction to the topic.
Accessibility Features
Keyboard Navigation
- Arrow keys: Navigate between tabs
- Home/End: Jump to first/last tab
- Enter/Space: Activate focused tab
- Tab: Move focus to tab content
ARIA Support
- Proper role attributes (tablist, tab, tabpanel)
- aria-selected for active tab state
- aria-controls linking tabs to panels
- aria-labelledby linking panels to tabs
- aria-disabled for disabled tabs