Tabs Component

Design a tabs component that organizes content into multiple panels with tab navigation.

R - Requirements

Key Questions:

• Default tab? (first tab, specific tab, none)
• Can tabs be disabled? (yes/no)
• Tab overflow? (scroll, dropdown, wrap)
• Lazy load content? (yes, for performance)
• Persist active tab? (localStorage, URL hash)

Common Answers:

• First tab active by default
• Support disabled tabs
• Scroll on overflow (horizontal)
• Lazy load tab content
• Persist in URL hash

A - Architecture

Tab Navigation Flow:

Tabs Architecture:

Architecture Decisions:

• Tab state management (active tab, disabled tabs) - Single source of truth
• Content rendering (lazy load vs eager) - Lazy load for performance, cache loaded tabs
• URL synchronization (hash-based routing) - Shareable links, browser back/forward
• Keyboard navigation (arrows, Home, End) - Full keyboard accessibility

Relevant Content:

• State Machines - Tab state
• Focus Management - Tab focus

D - Data Model

State Management:

• Active tab ID
• Tab list (id, label, disabled, content)
• URL hash (sync with active tab)

Persistence:

• URL hash (restore on page load)
• localStorage (optional, remember preference)

I - Interface

Features:

• Tab list (horizontal, scrollable)
• Tab buttons (active, disabled states)
• Tab panels (one visible at a time)
• Scroll indicators (left/right arrows if overflow)
• Keyboard navigation (arrows, Home, End, Enter)

Accessibility:

• ARIA tabs pattern
• role="tablist" on container
• role="tab" on buttons
• role="tabpanel" on panels
• aria-selected on active tab
• aria-controls linking tab to panel
• aria-disabled on disabled tabs
• Keyboard navigation (arrows, Home, End, Enter)

Relevant Content:

• Keyboard Shortcuts - Tab navigation
• Accessible Animations - Tab transitions

O - Optimizations

Performance:

• Lazy load content (only render active tab)
• Memoize tab content (prevent re-renders)
• Virtual scrolling (for many tabs, if needed)

UX:

• Smooth transitions (fade, slide)
• Scroll into view (active tab visible)
• URL sync (shareable links, browser back/forward)

Relevant Content:

• Code Splitting - Lazy load tabs
• Animation Performance - Smooth transitions

Implementation Checklist

• Tab list (horizontal, scrollable)
• Active tab state
• Disabled tab support
• Tab panels (one visible)
• Lazy load content (only active tab)
• Keyboard navigation (arrows, Home, End, Enter)
• ARIA attributes (role, aria-selected, aria-controls)
• URL hash sync (restore on load)
• Scroll indicators (overflow handling)
• Smooth transitions (fade, slide)
• Scroll into view (active tab visible)

Common Pitfalls

❌ Rendering all tabs → Performance issues
✅ Lazy load content, only render active tab

❌ No keyboard navigation → Poor accessibility
✅ Arrow keys to navigate, Enter to select, Home/End to jump

❌ No URL sync → Can't share links, lose state on refresh
✅ Sync with URL hash, restore on page load

❌ Tab overflow not handled → Tabs cut off, unusable
✅ Horizontal scroll, scroll indicators, scroll into view