wwwwwwwwwwwwwwwwwww

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 for web

  • Full keyboard navigation

Note: Tabs have landed on v1.7 and not fully ready for runtime. Send us your feedback and we'll address it. We're marking it Beta a such as there may be hopefully minimal breaking changes as we get feedback on the API.

Usage

import { SizableText, Tabs } from 'tamagui'



export default () => (

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

    <Tabs.List space>

      <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 have effect on 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 layed out

  • dir

    "ltr" | "rtl"

    The direction of navigation between toolbar items

  • activationMode

    "manual" | "automatic"

    Default: 

    automatic

    Whether or not a tab is activated automatically or manually. Not applicable on mobile

    • 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

    • Tabs.Trigger

    Extends Button, adding:

    Props

  • value

    string

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

  • onInteraction

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

    Used for making custom indicators when trigger interacted with

  • unstyled

    boolean

    When true, remove all default tamagui styling

    • 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 Trigger's onInteraction prop.

    Previous

    Group

    Next

    Avatar

    Edit this page on GitHub.