Tab Selector

Tab interface for switching between different views or content sections.

When to use

• To organize content into distinct, navigable sections
• For settings pages with multiple categories
• To display different views of the same data (e.g., table view, card view)
• In product detail pages for description, specifications, reviews, etc.

Key features

• Multiple variants - Underline (default), solid, and pills
• Three sizes - Small, medium (default), and large
• Full width option - Tabs can span the full width of their container
• Icon support - Add icons to tab labels
• Badge support - Display counts or indicators on tabs
• Keyboard navigation - Full arrow key support, Home/End, and Enter/Space
• Accessible - ARIA attributes and focus management

Anatomy

A tab selector consists of:

• Tab List (.pm7-tab-list) - Container for tab buttons
• Tab Trigger (.pm7-tab-trigger) - Individual clickable tab button
• Tab Content (.pm7-tab-content) - The panel displaying content for the selected tab
• Icon (.pm7-tab-trigger-icon) - Optional visual indicator within a tab
• Badge (.pm7-tab-trigger-badge) - Optional counter or indicator within a tab

Installation

npm install @pm7/core

CSS Classes

<div class="pm7-tab-selector" data-pm7-tab-selector>
  <div class="pm7-tab-list">
    <button class="pm7-tab-trigger" aria-controls="tab-1" data-state="active">Tab 1</button>
    <button class="pm7-tab-trigger" aria-controls="tab-2">Tab 2</button>
    <button class="pm7-tab-trigger" aria-controls="tab-3">Tab 3</button>
  </div>
  
  <div class="pm7-tab-content" id="tab-1" data-state="active">
    <p>Content for Tab 1</p>
  </div>
  <div class="pm7-tab-content" id="tab-2">
    <p>Content for Tab 2</p>
  </div>
  <div class="pm7-tab-content" id="tab-3">
    <p>Content for Tab 3</p>
  </div>
</div>

Data Attributes

Basic Usage

Note: The default tab style uses an underline indicator. No additional class is needed for this variant.

State Management

Tabs use data-state="active" attributes for state management, with fallback support for --active modifier classes:

<!-- Preferred: Using data-state -->
<button class="pm7-tab-trigger" data-state="active">Active Tab</button>
<div class="pm7-tab-content" data-state="active">Active Content</div>

<!-- Alternative: Using modifier classes -->
<button class="pm7-tab-trigger pm7-tab-trigger--active">Active Tab</button>
<div class="pm7-tab-content pm7-tab-content--active">Active Content</div>

Theme Support

PM7 Tab Selector includes built-in support for:

• Dark Mode - Automatically adapts when the .dark class is present on a parent element
• RTL Support - Fully supports right-to-left layouts with dir="rtl"

The component uses standard PM7 design tokens for consistent theming across your application.

JavaScript API

Tab selectors are automatically initialized when the DOM loads. For dynamic content, you can manually initialize:

import { PM7TabSelector } from '@pm7/core';

// Initialize a specific tab selector
const element = document.querySelector('[data-pm7-tab-selector]');
const tabSelector = new PM7TabSelector(element);

// Or re-initialize all tab selectors
PM7TabSelector.autoInit();

React Usage

import { TabSelector, TabList, TabTrigger, TabContent } from '@pm7/react';

function MyComponent() {
  return (
    <TabSelector defaultValue="tab1">
      <TabList>
        <TabTrigger value="tab1">Tab 1</TabTrigger>
        <TabTrigger value="tab2">Tab 2</TabTrigger>
        <TabTrigger value="tab3">Tab 3</TabTrigger>
      </TabList>
      <TabContent value="tab1">
        <p>Content for Tab 1</p>
      </TabContent>
      <TabContent value="tab2">
        <p>Content for Tab 2</p>
      </TabContent>
      <TabContent value="tab3">
        <p>Content for Tab 3</p>
      </TabContent>
    </TabSelector>
  );
}

Accessibility

• Uses ARIA tablist, tab, and tabpanel roles
• Proper aria-controls and aria-selected attributes
• Keyboard navigation follows ARIA authoring practices
• Focus management for screen readers

Keyboard Navigation

• Tab - Move focus into tab list
• Arrow Left/Up - Move to previous tab
• Arrow Right/Down - Move to next tab
• Home - Jump to first tab
• End - Jump to last tab
• Enter or Space - Activate focused tab

Best Practices

• Clear labels - Use descriptive, concise tab labels
• Logical order - Arrange tabs in a logical sequence
• Limited number - Avoid more than 5-7 tabs in one group
• Consistent content - Each tab should contain related content
• Visual feedback - Always show which tab is active

Copy this link that can be used as documentation for working with this component: