# Tab

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tab

<Callout type="info" title="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.


</Callout>

`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.

See [TabProvider and useTab](/native-sdk/guide/components/tab/advanced-api/) when you need a custom tab bar.

## Overview [#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 [#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 [#architecture]

The Tab system consists of several interconnected components:

### Core Components [#core-components]

- **[Tab](/native-sdk/guide/components/tab/tab/)** - Main container component that manages state and provides context
- **[Tab.Item](/native-sdk/guide/components/tab/tab-item/)** - Individual tab item component with icon and text support

## Related Components [#related-components]

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