Z

Tabs + Tab

A tabbed navigation component powered by Alpine.js. The Tabs container manages state while individual Tab components render as interactive buttons with support for icons and badges.

Basic Tabs

Overview content goes here. This is the first tab panel.

Details content goes here. This is the second tab panel.

Settings content goes here. This is the third tab panel.

With Icons

Dashboard

Your health dashboard with key metrics and insights.

Alerts

View and manage your health alerts and notifications.

Map

Interactive risk map showing Zika transmission areas.

Profile

Manage your account and health profile settings.

With Badges

Showing all 24 notifications.

You have 5 unread notifications.

Archived notifications appear here.

Complete Example

Current Alerts

You have 3 active alerts requiring your attention.

Past Week

Review alerts from the past 7 days.

All Time

Complete history of 156 alerts since you joined.

Usage Example




            

                    

    
    

        

            First tab content
        

        

            Second tab content

Props

Tabs Container

Prop Type Default Description
active string|null null Initial active tab key
class string '' Additional CSS classes

Tab Button

Prop Type Default Description
key string required Unique tab identifier
label string required Tab label text
icon string|null null Optional icon name
badge string|null null Optional badge text/count
class string '' Additional CSS classes

Key Features

Alpine.js Powered

Reactive state management with smooth transitions

ARIA Compliant

Proper role="tab" and aria-selected attributes

Keyboard Navigation

Full keyboard support with proper tabindex management

Flexible Content

Support for icons, badges, and custom styling

Accessibility Features

ARIA Roles:

  • Tabs container has role="tablist"
  • Each tab has role="tab"
  • Active tab has aria-selected="true"

Keyboard Navigation:

  • Active tab has tabindex="0"
  • Inactive tabs have tabindex="-1"
  • Clear focus indicators for keyboard users

Visual Feedback:

  • Active state uses primary color with bottom border
  • Hover states provide clear interaction feedback
  • Smooth transitions between states