GitHub

Tabs

Use in pages to manage sub-pages

Features

  • Accessible, easy to compose, customize and animate

  • Sizable & works controlled or uncontrolled

  • Supports automatic and manual activation modes

  • Full keyboard navigation

Installation

Tabs is already installed in tamagui, or you can install it independently:

yarn add @tamagui/tabs

Usage

import { SizableText, Tabs } from 'tamagui'



export default () => (

  <Tabs defaultValue="tab1" width={400}>

    <Tabs.List>

      <Tabs.Tab value="tab1">

        <SizableText>Tab 1</SizableText>

      </Tabs.Tab>

      <Tabs.Tab value="tab2">

        <SizableText>Tab 2</SizableText>

      </Tabs.Tab>

    </Tabs.List>



    <Tabs.Content value="tab1">

      <H5>Tab 1</H5>

    </Tabs.Content>

    <Tabs.Content value="tab2">

      <H5>Tab 2</H5>

    </Tabs.Content>

  </Tabs>

)

API Reference

Tabs

Root tabs component. Extends Stack. Passing the size prop to this component will affect the descendants.

Props

  • value

    string

    The value for the selected tab, if controlled.

  • defaultValue

    string

    The value of the tab to select by default, if uncontrolled.

  • onValueChange

    (value: string) => void

    A function called when a new tab is selected.

  • orientation

    "horizontal" | "vertical"

    Default: 

    horizontal

    The orientation the tabs are laid out in.

  • dir

    "ltr" | "rtl"

    The direction of navigation between toolbar items.

  • activationMode

    "manual" | "automatic"

    Default: 

    manual

    Whether a tab is activated automatically (on focus) or manually (on click/enter).

  • loop

    boolean

    Default: 

    true

    Whether keyboard navigation should loop from last to first and vice versa.

    • Tabs.List

    Container for the trigger buttons. Supports scrolling by extending Group. You can disable passing border radius to children by passing disablePassBorderRadius.

    Props

  • loop

    boolean

    Default: 

    true

    Whether or not to loop over after reaching the end or start of the items. Used mainly for managing keyboard navigation.

    • Since Tabs.List extends Group, the same limitation applies: automatic border radius detection only works when Tabs.Tab is a direct child of Tabs.List. If you wrap tabs in custom components, see the Group docs on nested items for workarounds.

    Tabs.Tab

    Extends ThemeableStack, adding:

    Props

  • value

    string

    The value for the tabs state to be changed to after activation of the trigger.

  • onInteraction

    (type: InteractionType, layout: TabLayout | null) => void

    Used for making custom indicators when trigger is interacted with.

  • disabled

    boolean

    Whether the tab is disabled.

  • unstyled

    boolean

    When true, removes all default Tamagui styling.

  • activeStyle

    StyleProp

    Styles to apply when the tab is selected.

  • activeTheme

    string | null

    Theme to apply when the tab is selected. Set to null for no theme change.

    • Tabs.Content

    Where each tab’s content will be shown. Extends ThemeableStack, adding:

    Props

  • value

    string

    Will show the content when the value matches the state of Tabs root.

  • forceMount

    boolean

    Default: 

    false

    Used to force mounting when more control is needed. Useful when controlling animation with Tamagui animations.

    • Examples

    Animations

    Here is a demo with more advanced animations using AnimatePresence and Tab’s onInteraction prop.

    Previous

    Sheet

    Next

    Tooltip

    Edit this page on GitHub.