Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation


pnpm dlx bna-ui add tabs

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

<Tabs defaultValue='tab1'>
  <TabsList>
    <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
    <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
    <TabsTrigger value='tab3'>Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value='tab1'>
    <Text>Content for Tab 1</Text>
  </TabsContent>
  <TabsContent value='tab2'>
    <Text>Content for Tab 2</Text>
  </TabsContent>
  <TabsContent value='tab3'>
    <Text>Content for Tab 3</Text>
  </TabsContent>
</Tabs>

Examples

Default

Vertical Orientation

Disabled Tabs

Custom Styling

API Reference

Tabs

The root container for the tabs component.

Prop	Type	Default	Description
`haptic`	`boolean`	`true`	Whether to trigger haptic feedback when the active tab changes, by tap or by swipe. Programmatic changes stay silent.
`children`	`ReactNode`	-	The tabs list and content components.
`defaultValue`	`string`	-	The value of the tab that should be active by default.
`value`	`string`	-	The controlled active tab value. When provided, the component becomes controlled and `onValueChange` must be used to update it.
`onValueChange`	`(value: string) => void`	-	Called whenever the active tab changes, whether by press or swipe.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the tabs.
`enableSwipe`	`boolean`	`true`	Whether horizontal tabs can be swiped between, in addition to pressing a trigger. Has no effect when `orientation` is `"vertical"`.
`style`	`ViewStyle`	-	Additional styles to apply to the container.

TabsList

Container for the tab triggers.

Prop	Type	Description
`children`	`ReactNode`	The tab trigger components.
`style`	`ViewStyle`	Additional styles to apply to the tabs list.

TabsTrigger

The clickable tab that activates its associated content.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content of the tab trigger (usually text).
`value`	`string`	-	The unique value that identifies this tab.
`disabled`	`boolean`	`false`	Whether the tab is disabled.
`style`	`ViewStyle`	-	Additional styles to apply to the trigger.
`textStyle`	`TextStyle`	-	Additional styles to apply to the trigger text.

TabsContent

The content panel associated with a tab trigger.

Prop	Type	Description
`children`	`ReactNode`	The content to display when the tab is active.
`value`	`string`	The value that matches the associated trigger.
`style`	`ViewStyle`	Additional styles to apply to the content.

Accessibility

The Tabs component is built with accessibility in mind:

TabsList exposes accessibilityRole="tablist", each TabsTrigger exposes accessibilityRole="tab" with accessibilityState={{ selected, disabled }}
Disabled tabs report accessibilityState.disabled to screen readers

Table Text

On This Page

Installation Usage Examples Default Vertical Orientation Disabled Tabs Custom Styling API Reference Accessibility