# Tab.Item

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

Individual tab item component that represents a single tab within a Tab container. Supports icons, custom styling for active/inactive states, and theme integration with automatic color management.

## Quick Example [#quick-example]

```tsx
import { Tab } from "@ovok/native";
import { Home, Settings, User } from "iconsax-react-nativejs";
import React from "react";

export const TabItemExample = () => {
  const [activeTab, setActiveTab] = React.useState("home");

  return (
    <Tab value={activeTab} onChange={setActiveTab}>
      <Tab.Item value="home" icon={(color) => <Home size={20} color={color} />}>
        Home
      </Tab.Item>
      <Tab.Item
        value="profile"
        icon={(color) => <User size={20} color={color} />}
      >
        Profile
      </Tab.Item>
      <Tab.Item
        value="settings"
        icon={(color) => <Settings size={20} color={color} />}
      >
        Settings
      </Tab.Item>
    </Tab>
  );
};

export default TabItemExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/tab` API reference](/native-sdk/reference/tab).

## Component Behavior [#component-behavior]

The Tab.Item component:

1. **State Awareness**: Automatically detects if it's the active tab using context
2. **Dynamic Styling**: Applies different styles based on active/inactive state
3. **Color Management**: Provides appropriate colors to icon functions
4. **Event Handling**: Handles press events to update tab selection
5. **Theme Integration**: Uses theme colors for consistent appearance

### Color System [#color-system]

Tab.Item automatically provides colors to icons and text based on state:

- **Active**: `theme.colors.primary`
- **Inactive**: `theme.colors.onSurfaceDisabled`

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Active tab color (text and icon)
- `theme.colors.onSurfaceDisabled` - Inactive tab color (text and icon)
- `theme.spacing(1)` - Gap between icon and text
- `theme.spacing(2)` - Vertical padding

The component does not add an accessibility role, state, or label automatically.

## Related Components [#related-components]

- [Tab](/native-sdk/guide/components/tab/tab/) - Parent container component