Tabs

Tabs is a compound component family. The root holds the active value and exposes it through context, while TabList, Tab, and TabPanel consume it. It works controlled (via value and onValueChange) or uncontrolled (via defaultValue).

Import

import { Tabs, TabList, Tab, TabPanel } from '@mindees/ui';

Usage

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
    <Tab value="settings" disabled>
      Settings
    </Tab>
  </TabList>
  <TabPanel value="overview">
    <Text>Overview content</Text>
  </TabPanel>
  <TabPanel value="activity">
    <Text>Activity content</Text>
  </TabPanel>
  <TabPanel value="settings">
    <Text>Settings content</Text>
  </TabPanel>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
value	string	—	Controlled active tab value.
defaultValue	string	''	Initial active value when uncontrolled.
onValueChange	(next: string) => void	—	Fired whenever the active tab changes.
children	ReactNode	—	Tab parts (TabList, TabPanel).

TabList

Prop	Type	Default	Description
scrollable	boolean	false	Render inside a horizontal ScrollView for overflow.
children	ReactNode	—	One or more Tab elements.

Tab

Prop	Type	Default	Description
value	string	—	Identifier matched against the active Tabs value.
children	ReactNode	—	Label content rendered inside the tab.
disabled	boolean	false	Prevents activation and dims the tab.

TabPanel

Prop	Type	Default	Description
value	string	—	Renders children only when this matches the active tab.
children	ReactNode	—	Panel content.

Accessibility

The non-scrollable TabList uses accessibilityRole="tablist". Each Tab is accessibilityRole="tab" with accessibilityState={{ selected, disabled }} so screen readers announce the active state. Disabled tabs ignore press events. On the web target, native focus order follows DOM order.