# Tabs

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

Use `Tab` for a small set of sibling views that share one screen context. The
component is controlled: keep the active tab in application state and use
`onChange` to switch the displayed content.

```tsx
import { Tab } from "@ovok/native/tab";

<Tab value={activeTab} onChange={setActiveTab}>
  <Tab.Item value="overview">Overview</Tab.Item>
  <Tab.Item value="history">History</Tab.Item>
</Tab>
```

Render the selected panel from the same `activeTab` value. Use `TabProvider` and
`useTab` when a custom tab bar needs the shared value and callback without the
default `Tab` rendering. For top-level app navigation, use your router's navigation
model rather than using tabs as a substitute for routes.

## References [#references]

- [Tab and Tab.Item](/native-sdk/guide/components/tab/)
- [TabProvider and useTab](/native-sdk/guide/components/tab/advanced-api/)

## API reference [#api-reference]

Every export of `@ovok/native/tab`, with signatures, props and types, is in the [`tab` API reference](/native-sdk/reference/tab).