Skip to main content

Tab

The Tab module provides a flexible tab navigation component system built using the compound component pattern. It offers controlled state management, customizable styling, and seamless integration with the theme system for creating consistent navigation experiences in healthcare applications.

Overview​

The Tab module is designed around a compound component architecture, providing maximum flexibility while maintaining a clean and intuitive API for building tab-based navigation interfaces.

Key Features​

  • Compound Component Pattern: Tab container with Tab.Item children for flexible composition
  • Controlled State: Fully controlled component with value and onChange props
  • Theme Integration: Built-in theming support with spacing, colors, and typography
  • Icon Support: Optional icon rendering for tab items with dynamic color support
  • Customizable Styling: Individual styling for active/inactive states and overall appearance
  • Accessibility: Built-in accessibility features with proper test IDs and semantic markup
  • TypeScript Support: Full type safety with comprehensive type definitions

Architecture​

The Tab system consists of several interconnected components:

Core Components​

  • Tab - Main container component that manages state and provides context
  • Tab.Item - Individual tab item component with icon and text support

This Tab module integrates seamlessly with other SDK components to provide comprehensive navigation solutions for healthcare applications.