Getting Started
Installation
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
All Components
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxComboboxNumber InputPassword InputRadioSelectSliderSwitchText Input
Data Display
AvatarDividerHeader BarIconLinkSegmented ControlTableTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationSide NavTabsTree
Feedback
Inline NotificationProgressProgress RingToast Notification
Troubleshooting

Tabs

import {Tab, Tabs} from "@qualcomm-ui/react/tabs"

Examples

Horizontal

The default orientation is horizontal. The left and right arrow keys can be used to navigate between tabs.

Documents

Vertical

In vertical orientation, the up and down arrow keys are used instead.

Documents

Icons and variants

Tabs support start and end icons. Customize the variant with the iconVariant prop. Use the variant prop to change the appearance of the tab.

<Tabs.Root>
  <TabContent />
</Tabs.Root>
<Tabs.Root iconVariant="filled">
  <TabContent />
</Tabs.Root>
<Tabs.Root variant="contained">
  <TabContent />
</Tabs.Root>
<Tabs.Root iconVariant="filled" variant="contained">
  <TabContent />
</Tabs.Root>

Controlled Value

The tab's active value can be controlled via the value, onValueChange, and defaultValue properties. These props follow our controlled state pattern.

Software Panel

Sizes

Line

The line variant supports four sizes: sm, md, lg, and xl

sm
md
lg
xl

Contained

The contained variant supports only two sizes: sm and md

Lazy Mounted

Use the lazyMount and unmountOnExit props to control render behavior for inactive tabs.

This component has been alive for 0 seconds

Disabled

Disable specific tabs with the disabled prop on the <Tab.Root> component.

<Tab.Root disabled value="products">
  <Tab.Button endIcon={Smartphone}>Products</Tab.Button>
</Tab.Root>

URL Search Parameters

The following example demonstrates how to render tabs that sync with the URL search parameters using react-router.

Documents

Context

Use the <Tabs.Context> component to access the tabs API from JSX.

<Tabs.Context>
  {(context) => (
    <>
      <Tabs.Panel value="tab-1">
        <Button
          endIcon={ChevronRight}
          onClick={() => context.setValue("tab-2")}
          size="sm"
          variant="outline"
        >
          Go to next tab
        </Button>
      </Tabs.Panel>
      <Tabs.Panel className="flex items-center gap-2" value="tab-2">
        <Button
          onClick={() => context.setValue("tab-1")}
          size="sm"
          startIcon={ChevronLeft}
          variant="outline"
        >
          Go to prev tab
        </Button>
        <Button
          endIcon={ChevronRight}
          onClick={() => context.setValue("tab-3")}
          size="sm"
          variant="outline"
        >
          Go to next tab
        </Button>
      </Tabs.Panel>
      <Tabs.Panel value="tab-3">
        <Button
          onClick={() => context.setValue("tab-2")}
          size="sm"
          startIcon={ChevronLeft}
          variant="outline"
        >
          Go to previous tab
        </Button>
      </Tabs.Panel>
    </>
  )}
</Tabs.Context>

Add and Remove Tabs

Tab Content 1

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

API

Tabs

<Tabs.Root>

Groups all parts of the tabs. Renders a <div> element by default.
PropTypeDefault
activationMode
The activation mode of the tabs.
  • 'automatic': Tabs are activated when receiving focus
  • 'manual': Tabs are activated when clicked or the enter key is pressed.
| 'automatic'
| 'manual'
"automatic"
animateIndicator
If true, the indicator's position change will animate when the active tab changes. Only applies to the line variant.
boolean
true
children
React children prop.
ReactNode
composite
Determines whether tabs act as a standalone composite widget (true) or as a non-focusable component within another widget (false).
boolean
true
defaultValue
The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
string
deselectable
Whether the active tab can be deselected when clicking on it.
boolean
dir
The document's text/writing direction.
'ltr' | 'rtl'
'ltr'
getRootNode
A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
    () =>
    | Node
    | ShadowRoot
    | Document
    iconVariant
    The visual style of tab icons.
    • 'ghost': The icon is rendered with a transparent background.
    • 'filled': The icon is rendered with a solid background.
    | 'ghost'
    | 'filled'
    'ghost'
    lazyMount
    When true, the component will not be rendered in the DOM until it becomes visible or active.
    boolean
    false
    loopFocus
    Whether the keyboard navigation will loop from last tab to first, and vice versa.
    boolean
    true
    onFocusChange
    Callback to be called when the focused tab changes
      (
        value: string,
      ) => void
      onValueChange
      Callback to be called when the selected/active tab changes
        (
          value: string,
        ) => void
        orientation
        The orientation of the tabs. Can be horizontal or vertical
        • 'horizontal': only left and right arrow key navigation will work.
        • 'vertical': only up and down arrow key navigation will work.
        | 'horizontal'
        | 'vertical'
        "horizontal"
        render
        Allows you to replace the component's HTML element with a different tag or component. Learn more
        | ReactElement
        | ((
            props: object,
          ) => ReactElement)
        size
        Governs the size of the tab text, icons, spacing, and padding. Note that lg and xl are not supported by the contained variant.
        | 'sm'
        | 'md'
        | 'lg'
        | 'xl'
        'md'
        translations
        Specifies the localized strings that identifies the accessibility elements and their states
        {
          listLabel?: string
        }
        unmountOnExit
        When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
        boolean
        false
        value
        The controlled selected tab value
        string
        variant
        Governs the appearance of the tab.
        • 'line': active tab items have a line underneath them.
        • 'contained': active tab items have a box-like appearance.
        | 'line'
        | 'contained'
        activationMode
        Type
        | 'automatic'
        | 'manual'
        Description
        The activation mode of the tabs.
        • 'automatic': Tabs are activated when receiving focus
        • 'manual': Tabs are activated when clicked or the enter key is pressed.
        animateIndicator
        Type
        boolean
        Description
        If true, the indicator's position change will animate when the active tab changes. Only applies to the line variant.
        children
        Type
        ReactNode
        Description
        React children prop.
        composite
        Type
        boolean
        Description
        Determines whether tabs act as a standalone composite widget (true) or as a non-focusable component within another widget (false).
        defaultValue
        Type
        string
        Description
        The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
        deselectable
        Type
        boolean
        Description
        Whether the active tab can be deselected when clicking on it.
        dir
        Type
        'ltr' | 'rtl'
        Description
        The document's text/writing direction.
        getRootNode
        Type
        () =>
        | Node
        | ShadowRoot
        | Document
        Description
        A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
          iconVariant
          Type
          | 'ghost'
          | 'filled'
          Description
          The visual style of tab icons.
          • 'ghost': The icon is rendered with a transparent background.
          • 'filled': The icon is rendered with a solid background.
          lazyMount
          Type
          boolean
          Description
          When true, the component will not be rendered in the DOM until it becomes visible or active.
          loopFocus
          Type
          boolean
          Description
          Whether the keyboard navigation will loop from last tab to first, and vice versa.
          onFocusChange
          Type
          (
            value: string,
          ) => void
          Description
          Callback to be called when the focused tab changes
            onValueChange
            Type
            (
              value: string,
            ) => void
            Description
            Callback to be called when the selected/active tab changes
              orientation
              Type
              | 'horizontal'
              | 'vertical'
              Description
              The orientation of the tabs. Can be horizontal or vertical
              • 'horizontal': only left and right arrow key navigation will work.
              • 'vertical': only up and down arrow key navigation will work.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              size
              Type
              | 'sm'
              | 'md'
              | 'lg'
              | 'xl'
              Description
              Governs the size of the tab text, icons, spacing, and padding. Note that lg and xl are not supported by the contained variant.
              translations
              Type
              {
                listLabel?: string
              }
              Description
              Specifies the localized strings that identifies the accessibility elements and their states
              unmountOnExit
              Type
              boolean
              Description
              When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
              value
              Type
              string
              Description
              The controlled selected tab value
              variant
              Type
              | 'line'
              | 'contained'
              Description
              Governs the appearance of the tab.
              • 'line': active tab items have a line underneath them.
              • 'contained': active tab items have a box-like appearance.

              <Tabs.List>

              Container for the tab buttons. Renders a <div> element by default.
              PropType
              children
              React children prop.
              ReactNode
              id
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              string
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              children
              Type
              ReactNode
              Description
              React children prop.
              id
              Type
              string
              Description
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more

              <Tabs.Indicator>

              Visual indicator that highlights the active tab. Renders a <div> element by default. You only need to render a single <Tabs.Indicator> component per tab list.
              <Tabs.Root>
                <Tabs.List>
                  <Tabs.Indicator />
                  <Tab.Root value="tab-1">
                    <Tab.Button>Tab 1</Tab.Button>
                  </Tab.Root>
                </Tabs.List>
              </Tabs.Root>
              PropType
              id
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              string
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              id
              Type
              string
              Description
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more

              <Tabs.Panel>

              Content area associated with a tab. Renders a <div> element by default.
              PropType
              value
              *
              The value of the associated tab
              string
              children
              React children prop.
              ReactNode
              id
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              string
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              value
              *
              Type
              string
              Description
              The value of the associated tab
              children
              Type
              ReactNode
              Description
              React children prop.
              id
              Type
              string
              Description
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more

              Tab

              <Tab.Root>

              Groups all parts of a single tab. Renders a <div> element by default.
              PropType
              value
              *
              The value of the tab
              string
              children
              React children prop.
              ReactNode
              disabled
              Whether the tab is disabled
              boolean
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              value
              *
              Type
              string
              Description
              The value of the tab
              children
              Type
              ReactNode
              Description
              React children prop.
              disabled
              Type
              boolean
              Description
              Whether the tab is disabled
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more

              <Tab.Button>

              Button that activates its associated tab panel. Renders a <button> element by default.
              PropType
              children
              React children prop.
              ReactNode
              disabled
              Use the disabled prop on the parent <Tab.Root> component instead.
              never
              endIcon
              Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
              | LucideIcon
              | ReactNode
              id
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              string
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              startIcon
              Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size. Supply as a ReactElement for additional customization.
              | LucideIcon
              | ReactNode
              children
              Type
              ReactNode
              Description
              React children prop.
              disabled
              Type
              never
              Description
              Use the disabled prop on the parent <Tab.Root> component instead.
              endIcon
              Type
              | LucideIcon
              | ReactNode
              Description
              Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
              id
              Type
              string
              Description
              id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              startIcon
              Type
              | LucideIcon
              | ReactNode
              Description
              Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size. Supply as a ReactElement for additional customization.

              <Tab.DismissButton>

              Button that dismisses a tab. Renders a <button> element by default.
              PropType
              children
              React children prop.
              ReactNode
              render
              Allows you to replace the component's HTML element with a different tag or component. Learn more
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              children
              Type
              ReactNode
              Description
              React children prop.
              render
              Type
              | ReactElement
              | ((
                  props: object,
                ) => ReactElement)
              Description
              Allows you to replace the component's HTML element with a different tag or component. Learn more

              <Tabs.Context>

              PropType
              children
              *
              Render Prop that provides the current TabsApi context.
              RenderProp<TabsApi>
              children
              *
              Type
              RenderProp<TabsApi>
              Description
              Render Prop that provides the current TabsApi context.

              TabsApi

              PropType
              clearValue
              Clears the value of the tabs.
                () => void
                focus
                Set focus on the selected tab button
                  () => void
                  focusedValue
                  The value of the tab that is currently focused.
                  string
                  getTabState
                  Returns the state of the tab with the given props
                    (props: {
                      disabled?: boolean
                      value: string
                    }) => {
                      disabled: boolean
                      focused: boolean
                      selected: boolean
                    }
                    setIndicatorRect
                    Sets the indicator rect to the tab with the given value
                      (
                        value: string,
                      ) => void
                      setValue
                      Sets the value of the tabs.
                        (
                          value: string,
                        ) => void
                        syncTabIndex
                        Synchronizes the tab index of the content element. Useful when rendering tabs within a select or combobox
                          () => void
                          value
                          The current value of the tabs.
                          string
                          clearValue
                          Type
                          () => void
                          Description
                          Clears the value of the tabs.
                            focus
                            Type
                            () => void
                            Description
                            Set focus on the selected tab button
                              focusedValue
                              Type
                              string
                              Description
                              The value of the tab that is currently focused.
                              getTabState
                              Type
                              (props: {
                                disabled?: boolean
                                value: string
                              }) => {
                                disabled: boolean
                                focused: boolean
                                selected: boolean
                              }
                              Description
                              Returns the state of the tab with the given props
                                setIndicatorRect
                                Type
                                (
                                  value: string,
                                ) => void
                                Description
                                Sets the indicator rect to the tab with the given value
                                  setValue
                                  Type
                                  (
                                    value: string,
                                  ) => void
                                  Description
                                  Sets the value of the tabs.
                                    syncTabIndex
                                    Type
                                    () => void
                                    Description
                                    Synchronizes the tab index of the content element. Useful when rendering tabs within a select or combobox
                                      value
                                      Type
                                      string
                                      Description
                                      The current value of the tabs.
                                      Side Nav
                                      Tree
                                      Examples
                                      Horizontal
                                      Vertical
                                      Icons and variants
                                      Controlled Value
                                      Sizes
                                      Line
                                      Contained
                                      Lazy Mounted
                                      Disabled
                                      URL Search Parameters
                                      Context
                                      Add and Remove Tabs
                                      API
                                      Tabs
                                      <Tabs.Root>
                                      <Tabs.List>
                                      <Tabs.Indicator>
                                      <Tabs.Panel>
                                      Tab
                                      <Tab.Root>
                                      <Tab.Button>
                                      <Tab.DismissButton>
                                      <Tabs.Context>
                                      TabsApi
                                      Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.