Skip to main content

Tab

Public API exported from @ovok/native

Every symbol below is re-exported from the package barrel — you can import { X } from '@ovok/native' for any of them. Earlier guidance treated some of these as "internal-only"; that's no longer accurate, the barrel was expanded in #139 so the docs and the public surface match.

  • Tab, Tab.Item — controlled compound — pass value: string, onChange: (v: string) => void. Tab.Item accepts value, icon, active/inactive style slots.
  • TabProvider — standalone provider for custom tab UIs that don't want Tab's default rendering.
  • useTab — hook returning { value, onChange }; use it below <Tab> or <TabProvider>.
  • TabContext — underlying React context — escape hatch.
  • TabProps, TabContextType — TypeScript types. TabItemProps is used internally and is not a named package export; use the Tab.Item props inferred from the component.

useTab() outside a Tab or TabProvider returns the context's empty default object; calling its onChange then fails with a generic type error. Keep consumers below one of those providers.

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: Test IDs are supported, but the components do not add semantic tab roles or states automatically; supply those semantics in the host navigation.
  • 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.