Tabs

Organizes content into multiple panels, allowing users to switch between views.

Import

tsx

import { Tabs, TabsList, TabTrigger, TabContent } from '@tac-ui/native';
import type { TabVariant } from '@tac-ui/native';

Playground

Interactively configure the Tabs props below.

Account

Password

Settings

Account settings content.

Variant

tsx

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1"><Text>Account settings content.</Text></TabContent>
  <TabContent value="tab2"><Text>Password settings content.</Text></TabContent>
  <TabContent value="tab3"><Text>General settings content.</Text></TabContent>
</Tabs>

Underline

The default underline variant renders tabs with a bottom border and an animated indicator that slides between active tabs. Use this for content-heavy pages where tabs span the full width.

Account

Password

Settings

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">
    <Text>Account settings content.</Text>
  </TabContent>
  <TabContent value="tab2">
    <Text>Password settings content.</Text>
  </TabContent>
  <TabContent value="tab3">
    <Text>General settings content.</Text>
  </TabContent>
</Tabs>

Pill

The pill variant wraps the tab list in a secondary-colored container and uses a filled pill indicator. Use this for compact, inline tab groups.

Account

Password

Settings

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="pill">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">
    <Text>Account settings content.</Text>
  </TabContent>
  <TabContent value="tab2">
    <Text>Password settings content.</Text>
  </TabContent>
  <TabContent value="tab3">
    <Text>General settings content.</Text>
  </TabContent>
</Tabs>

Outline

The outline variant renders the tab list as a bordered control group. The active tab is highlighted with a filled background.

Account

Password

Settings

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="outline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">
    <Text>Account settings content.</Text>
  </TabContent>
  <TabContent value="tab2">
    <Text>Password settings content.</Text>
  </TabContent>
  <TabContent value="tab3">
    <Text>General settings content.</Text>
  </TabContent>
</Tabs>

Icon

Pass an icon prop to TabTrigger to display an icon alongside the tab label. Icons are rendered at 16x16 and respect the active/inactive color.

Account

Settings

Notifications

Account settings content.

tsx

import { User, Settings, Bell } from '@tac-ui/icon-native';

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabTrigger value="tab1" icon={<User size={16} />}>Account</TabTrigger>
    <TabTrigger value="tab2" icon={<Settings size={16} />}>Settings</TabTrigger>
    <TabTrigger value="tab3" icon={<Bell size={16} />}>Notifications</TabTrigger>
  </TabsList>
  <TabContent value="tab1"><Text>Account settings content.</Text></TabContent>
  <TabContent value="tab2"><Text>General settings content.</Text></TabContent>
  <TabContent value="tab3"><Text>Notification preferences content.</Text></TabContent>
</Tabs>

Controlled

Pass value and onValueChange to control the active tab externally. Useful for programmatic navigation or syncing tabs with other state.

tsx

const [activeTab, setActiveTab] = React.useState('tab1');

<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">
    <Text>Account settings content.</Text>
  </TabContent>
  <TabContent value="tab2">
    <Text>Password settings content.</Text>
  </TabContent>
  <TabContent value="tab3">
    <Text>General settings content.</Text>
  </TabContent>
</Tabs>

Scrollable Tabs

TabsList uses a horizontal ScrollView, so it handles overflow automatically when there are many tabs.

Monday

Tuesday

Wednesday

Thursday

Friday

Monday schedule

tsx

<Tabs defaultValue="tab1">
  <TabsList>
    <TabTrigger value="tab1">Monday</TabTrigger>
    <TabTrigger value="tab2">Tuesday</TabTrigger>
    <TabTrigger value="tab3">Wednesday</TabTrigger>
    <TabTrigger value="tab4">Thursday</TabTrigger>
    <TabTrigger value="tab5">Friday</TabTrigger>
  </TabsList>
  <TabContent value="tab1"><Text>Monday schedule</Text></TabContent>
  <TabContent value="tab2"><Text>Tuesday schedule</Text></TabContent>
  <TabContent value="tab3"><Text>Wednesday schedule</Text></TabContent>
  <TabContent value="tab4"><Text>Thursday schedule</Text></TabContent>
  <TabContent value="tab5"><Text>Friday schedule</Text></TabContent>
</Tabs>

API Reference

Tabs props:

Prop	Type	Default	Description
variant	"underline" \| "pill" \| "outline"	"underline"	Visual style of the tab list indicator.
defaultValue	string	""	The tab value selected by default in uncontrolled mode.
value	string	-	The controlled active tab value.
onValueChange	(value: string) => void	-	Called when the active tab changes. Use with value for controlled mode.
style	ViewStyle	-	Additional styles applied to the root View.
children	React.ReactNode	-	Compose with TabsList and TabContent.

TabTrigger props:

Prop	Type	Default	Description
value	string	-	The value this trigger activates; must match a TabContent value.
icon	React.ReactNode	-	Icon element displayed alongside the tab label.
children	React.ReactNode	-	Tab label text.
style	ViewStyle	-	Additional styles applied to the trigger Pressable.

TabContent props:

Prop	Type	Default	Description
value	string	-	The value that activates this content panel; must match a TabTrigger value.
children	React.ReactNode	-	Content rendered when this tab is active.
style	ViewStyle	-	Additional styles applied to the content View.