Tab
Tab group component for organizing content into selectable panels.
Keyboard: Arrow keys to navigate tabs, Enter/Space to activate. ARIA: role="tablist", role="tab", role="tabpanel".
$ npm install @bloc-ui/tab
Basic usage
Default
Profile content goes here. Manage your personal information and preferences.
Manual sizing
Dense spacing
Adjust tab density by setting the existing size tokens on bloc-tab-group.
Compact tab content
Disabled tab
One disabled tab
The middle tab is disabled and cannot be selected.
This tab is active.
Programmatic selection
selectedIndex binding
Control the active tab via [selectedIndex].
First tab panel.
Current index: 0
Custom token
Green indicator
Override colours via CSS custom properties.
Green themed tabs.