Tabs Component

Overview

Purpose

The Tabs component tablist + tabpanels orchestration.within our design system. It follows our composer layer principles, ensuring consistency and reusability across applications.

When to Use

Use when you need helping users navigate
Appropriate for navigation contexts
Follows composer component patterns

When Not to Use

Avoid when simpler alternatives exist
Don't use for form controls
Consider alternatives for edge cases

Live Example

import React from 'react';
import Tabs from './components/Tabs';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', minHeight: '100vh' }}>
      <Tabs defaultValue={props.defaultValue || 'tab1'}>
        <Tabs.List>
          <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
          <Tabs.Trigger value="tab2">Details</Tabs.Trigger>
          <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
        </Tabs.List>
        
        <Tabs.Content value="tab1">
          <div style={{ padding: '1rem' }}>
            <h3>Overview</h3>
            <p>This is the overview tab content.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab2">
          <div style={{ padding: '1rem' }}>
            <h3>Details</h3>
            <p>This tab contains detailed information.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab3">
          <div style={{ padding: '1rem' }}>
            <h3>Settings</h3>
            <p>Configure your preferences here.</p>
          </div>
        </Tabs.Content>
      </Tabs>
    </div>
  );
}

Open Sandbox

Anatomy

Understanding the structure of the Tabs component helps ensure proper implementation and customization.

Anatomy data not yet defined for this component. Define anatomy in the component contract file (Tabs.contract.json).

Variants & States

import React from 'react';
import Tabs from './components/Tabs';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', minHeight: '100vh' }}>
      <Tabs defaultValue={props.defaultValue || 'tab1'}>
        <Tabs.List>
          <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
          <Tabs.Trigger value="tab2">Details</Tabs.Trigger>
          <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
        </Tabs.List>
        
        <Tabs.Content value="tab1">
          <div style={{ padding: '1rem' }}>
            <h3>Overview</h3>
            <p>This is the overview tab content.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab2">
          <div style={{ padding: '1rem' }}>
            <h3>Details</h3>
            <p>This tab contains detailed information.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab3">
          <div style={{ padding: '1rem' }}>
            <h3>Settings</h3>
            <p>Configure your preferences here.</p>
          </div>
        </Tabs.Content>
      </Tabs>
    </div>
  );
}

Open Sandbox

API Reference

Props

Name	Type	Required	Default	Description
`defaultValue`	`string`	No	`'tab1'`	—
`value`	`string`	No	`{value`	—
`onValueChange`	`(value: string) => void`	No	`{onValueChange`	—
`activationMode`	`'auto' \| 'manual'`	No	`'auto'`	—
`orientation`	`'horizontal' \| 'vertical'`	No	`'horizontal'`	—
`dir`	`'ltr' \| 'rtl'`	No	`'ltr'`	—
`loop`	`boolean`	No	`true`	—
`unmountInactive`	`boolean`	No	`false`	—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Common Pitfalls

Roving tabindex errors
not linked to routing.

Accessibility Checklist

○ Keyboard navigation support
○ Screen reader compatibility
○ Color contrast compliance
○ Focus management
○ ARIA attributes
○ Reduced motion support

Usage Guidelines

✓ Do

Use consistent spacing and sizing
Follow established patterns
Provide clear labels and descriptions
Test with assistive technologies

✗ Don't

Override core functionality
Use without proper context
Ignore accessibility requirements
Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Tabs from './components/Tabs';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', minHeight: '100vh' }}>
      <Tabs defaultValue={props.defaultValue || 'tab1'}>
        <Tabs.List>
          <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
          <Tabs.Trigger value="tab2">Details</Tabs.Trigger>
          <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
        </Tabs.List>
        
        <Tabs.Content value="tab1">
          <div style={{ padding: '1rem' }}>
            <h3>Overview</h3>
            <p>This is the overview tab content.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab2">
          <div style={{ padding: '1rem' }}>
            <h3>Details</h3>
            <p>This tab contains detailed information.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab3">
          <div style={{ padding: '1rem' }}>
            <h3>Settings</h3>
            <p>Configure your preferences here.</p>
          </div>
        </Tabs.Content>
      </Tabs>
    </div>
  );
}

Open Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';
import Tabs from './components/Tabs';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', minHeight: '100vh' }}>
      <Tabs defaultValue={props.defaultValue || 'tab1'}>
        <Tabs.List>
          <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
          <Tabs.Trigger value="tab2">Details</Tabs.Trigger>
          <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
        </Tabs.List>
        
        <Tabs.Content value="tab1">
          <div style={{ padding: '1rem' }}>
            <h3>Overview</h3>
            <p>This is the overview tab content.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab2">
          <div style={{ padding: '1rem' }}>
            <h3>Details</h3>
            <p>This tab contains detailed information.</p>
          </div>
        </Tabs.Content>
        
        <Tabs.Content value="tab3">
          <div style={{ padding: '1rem' }}>
            <h3>Settings</h3>
            <p>Configure your preferences here.</p>
          </div>
        </Tabs.Content>
      </Tabs>
    </div>
  );
}

Open Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the Tabs component documentation. Found an issue or have suggestions?

Edit this page Report an issue Contribution guidelines

Tabs

Overview

Purpose

When to Use

When Not to Use

Live Example

Anatomy

Variants & States

API Reference

Props

Accessibility

Standards Compliance

Common Pitfalls

Accessibility Checklist

Usage Guidelines

✓ Do

✗ Don't

Examples

Basic Usage

Advanced Usage

Development Tools

Contribute

Related Components

Breadcrumbs

NavigationRail

Pagination

Sidebar Nav

Stepper

Accordion