TABS: Content organization with switchable panels
VARIANTS: Underline (default) | Vertical

Use tabs to organize content into distinct sections. Includes keyboard navigation (Arrow keys, Home/End) and full ARIA support. Replaces the old Nav Tabs/Pills component.

Basic Tabs (Underline)

Default underline style: Clean, minimal tabs with active indicator. Use for section switching within a page.

All applications content goes here. This panel shows all applications regardless of status.

Submitted applications only. Filtering to show applications that have been submitted.

Draft applications. Shows applications that families have started but not yet submitted.

Archived applications. Historical applications that are no longer active.

<div data-controller="tabs">...</div>

Alignment Variants

Alignment options: Center, end, fill, or justified tab layouts.

Center Aligned

Overview content

Details content

Settings content

End Aligned

Info content

Actions content

Fill (Equal Width)

Personal details

Address information

Education history

Justified (Full Width)

Step 1 content

Step 2 content

Step 3 content

<div class="tw-tabs tw-tabs-center">...</div>
<div class="tw-tabs tw-tabs-fill">...</div>

Size Variants

Sizes: Small for compact spaces, default for general use, large for prominent navigation.

Small Tabs

Active items

Inactive items

Large Tabs

Dashboard overview

Analytics reports

<div class="tw-tabs tw-tabs-sm">...</div>
<div class="tw-tabs tw-tabs-lg">...</div>

Tabs with Badges

Count badges: Add badges to show counts or status within tabs.

All applications (245 total)

Submitted applications (156 items)

Draft applications (67 items)

Rejected applications (22 items)

<button class="tw-tab">Label <span class="tw-badge tw-badge-sm">Count</span></button>

Disabled Tabs

Disabled state: Use .tw-disabled class to prevent interaction. Keyboard navigation skips disabled tabs.

Basic information form

Contact details form

Payment (not accessible)

Confirmation (not accessible)

<button class="tw-tab tw-disabled" aria-disabled="true">Locked</button>

Vertical Tabs

Vertical layout: Tabs stacked vertically for sidebar navigation or settings pages.

General settings

Application form configuration

Email template management

Third-party integrations

<div class="tw-tabs tw-tabs-vertical">...</div>

Prototype & Old Component Migration

Migration reference: How to migrate from prototype tabs and old Nav Tabs/Pills component.

Old Class New Class Notes
.nav.nav-tabs .tw-tabs Old Nav Tabs → Underline tabs
.nav-item (not needed) Tabs are direct children
.nav-link .tw-tab Individual tab button
.nav-link.active .tw-tab.tw-active Active state
.nav-fill .tw-tabs-fill Equal width tabs
.nav-justified .tw-tabs-justified Full width distribution
Prototype: .tabs .tw-tabs Same class name
Prototype: .tab .tw-tab Same class name
Prototype: .inner-tabs .tw-tabs.tw-tabs-sm Nested/secondary tabs

Keyboard Navigation

Accessibility: Full keyboard support with arrow keys, Home/End navigation.

Key Action
Arrow Left / Arrow Up Move to previous tab (wraps to end)
Arrow Right / Arrow Down Move to next tab (wraps to start)
Home Jump to first tab
End Jump to last tab
Tab Move focus out of tab list (standard behavior)

Note: Disabled tabs are automatically skipped during keyboard navigation.