Tabs
fw-tabs
A widget for organizing content into separate views where only one view is visible at a time. Supports horizontal and vertical orientations.
Usage
HTML Structure
Create a container with fw-tabs. Inside, add a list with fw-tab-list for the triggers, and divs with fw-tab-panel for the content.
HTML
<div class="fw-tabs">
<div class="fw-tab-list">
<button>Tab 1</button>
<button>Tab 2</button>
</div>
<div class="fw-tab-panel">
<p>Content for Tab 1</p>
</div>
<div class="fw-tab-panel">
<p>Content for Tab 2</p>
</div>
</div>
<script>FormWidgets.autoInit();</script>Options
| Option | Type | Default | Description |
|---|---|---|---|
| activeTab | number / string | 0 | Index (number) or ID (string) of the tab to activate initially. |
| orientation | string | 'horizontal' | Layout direction. Options: 'horizontal', 'vertical'. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-active-tab | activeTab | data-active-tab="1" |
| data-orientation | orientation | data-orientation="vertical" |
Methods
widget.activate(index)
Activates the tab at the specified index.
Parameter:
index (number)Keyboard Navigation
← →Navigate between tabs (Horizontal mode)
↑ ↓Navigate between tabs (Vertical mode)
HomeJump to first tab
EndJump to last tab
Features
Accessible
Automatically manages ARIA roles, states, and focus management.
Vertical Mode
Easily switch to a side-by-side vertical layout.
Themable
Seamlessly integrates with the library's design system.