Tabs

The Tabs component provides a clean and intuitive way to organize content into different sections. It supports custom styling, different tab layouts, and seamless integration with content areas.

Import

import { Tabs } from 'h2o-library';

Basic Usage

Simple Tabs

<Tabs
  tabs={["Tab 1", "Tab 2", "Tab 3"]}
  selectedTab="Tab 1"
  onSelectTab={() => {}}
/>

Tabs with Custom Styling

<Tabs
  tabs={["Overview", "Settings", "Analytics"]}
  selectedTab="Overview"
  onSelectTab={() => {}}
  className="bg-gray-100 p-2 rounded-lg"
  tabClassName="px-4 py-2 rounded-md hover:bg-white transition-colors"
/>

Tabs with Content

<div className="space-y-4">
  <Tabs
    tabs={["Overview", "Settings", "Analytics"]}
    selectedTab="Overview"
    onSelectTab={() => {}}
  />
  <div className="p-4 border rounded-lg">
    Content for Overview
  </div>
</div>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
tabs	string[]	-	Array of tab labels
selectedTab	string	-	Currently selected tab
onSelectTab	(tab: string) => void	-	Callback when a tab is selected
className	string	-	Additional CSS classes for the tabs container
tabClassName	string	-	Additional CSS classes for individual tabs

Design Considerations

• Clear visual hierarchy
• Consistent spacing and alignment
• Smooth transitions between tabs
• Proper contrast for selected state
• Hover and focus states
• Custom styling options
• Responsive design
• Support for many tabs
• Clear visual feedback
• Proper touch targets

Accessibility

• Proper ARIA attributes
• Keyboard navigation
• Screen reader support
• Focus management
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Tab panel associations
• State announcements
• Error handling
• Focus restoration