Tabs

Tabs provide top-level navigation for switching between related views or sections within the same context. They use a minimal, low-chrome visual treatment defined primarily by a selection indicator beneath the active tab.

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

import type {ReactElement} from "react"

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

export function TabsHorizontalDemo(): ReactElement {
  return (
    <Tabs.Root defaultValue="documents">
      <Tabs.List>
        <Tabs.Indicator />
        <Tab.Root value="documents">
          <Tab.Button>Documents</Tab.Button>
        </Tab.Root>
        <Tab.Root value="products">
          <Tab.Button>Products</Tab.Button>
        </Tab.Root>
        <Tab.Root value="software">
          <Tab.Button>Software</Tab.Button>
        </Tab.Root>
        <Tab.Root value="hardware">
          <Tab.Button>Hardware</Tab.Button>
        </Tab.Root>
      </Tabs.List>
      <Tabs.Panel value="documents">Documents</Tabs.Panel>
      <Tabs.Panel value="products">Products</Tabs.Panel>
      <Tabs.Panel value="software">Software</Tabs.Panel>
      <Tabs.Panel value="hardware">Hardware</Tabs.Panel>
    </Tabs.Root>
  )
}

Vertical

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

Documents

import type {ReactElement} from "react"

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

export function TabsVerticalDemo(): ReactElement {
  return (
    <Tabs.Root
      className="w-full"
      defaultValue="documents"
      orientation="vertical"
    >
      <Tabs.List>
        <Tabs.Indicator />
        <Tab.Root value="documents">
          <Tab.Button>Documents</Tab.Button>
        </Tab.Root>
        <Tab.Root value="products">
          <Tab.Button>Products</Tab.Button>
        </Tab.Root>
        <Tab.Root value="software">
          <Tab.Button>Software</Tab.Button>
        </Tab.Root>
        <Tab.Root value="hardware">
          <Tab.Button>Hardware</Tab.Button>
        </Tab.Root>
      </Tabs.List>
      <Tabs.Panel value="documents">Documents</Tabs.Panel>
      <Tabs.Panel value="products">Products</Tabs.Panel>
      <Tabs.Panel value="software">Software</Tabs.Panel>
      <Tabs.Panel value="hardware">Hardware</Tabs.Panel>
    </Tabs.Root>
  )
}

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

import {type ReactElement, useState} from "react"

import {ChevronLeft, ChevronRight} from "lucide-react"

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

export function TabsControlledValueDemo(): ReactElement {
  const [value, setValue] = useState<string>("software")

  const goToSoftwareTab = () => setValue("software")
  const goToHardwareTab = () => setValue("hardware")

  return (
    <Tabs.Root onValueChange={setValue} value={value}>
      <Tabs.List>
        <Tabs.Indicator />

        <Tab.Root value="software">
          <Tab.Button>Software</Tab.Button>
        </Tab.Root>
        <Tab.Root value="hardware">
          <Tab.Button>Hardware</Tab.Button>
        </Tab.Root>
      </Tabs.List>
      <Tabs.Panel value="software">
        <div className="flex flex-col gap-4">
          <div>Software Panel</div>
          <Button
            emphasis="primary"
            endIcon={ChevronRight}
            onClick={goToHardwareTab}
            size="sm"
          >
            View Hardware
          </Button>
        </div>
      </Tabs.Panel>
      <Tabs.Panel value="hardware">
        <div className="flex flex-col gap-4">
          <div>Hardware Panel</div>
          <Button
            emphasis="primary"
            onClick={goToSoftwareTab}
            size="sm"
            startIcon={ChevronLeft}
          >
            View Software
          </Button>
        </div>
      </Tabs.Panel>
    </Tabs.Root>
  )
}

Sizes

Line

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

import type {ReactElement} from "react"

import {Code, Cpu, FileText, Smartphone} from "lucide-react"

import type {QdsTabsSize} from "@qualcomm-ui/qds-core/tabs"
import {Tab, Tabs} from "@qualcomm-ui/react/tabs"

const sizes: QdsTabsSize[] = ["sm", "md", "lg", "xl"]

export function TabsLineSizesDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      {sizes.map((size) => (
        <div key={size} className="flex items-center gap-4">
          <div className="font-heading-xs text-neutral-primary w-16">
            {size}
          </div>
          <Tabs.Root defaultValue="documents" size={size}>
            <Tabs.List>
              <Tabs.Indicator />
              <Tab.Root value="documents">
                <Tab.Button endIcon={FileText}>Documents</Tab.Button>
              </Tab.Root>
              <Tab.Root value="products">
                <Tab.Button endIcon={Smartphone}>Products</Tab.Button>
              </Tab.Root>
              <Tab.Root value="software">
                <Tab.Button endIcon={Code}>Software</Tab.Button>
              </Tab.Root>
              <Tab.Root value="hardware">
                <Tab.Button endIcon={Cpu}>Hardware</Tab.Button>
              </Tab.Root>
            </Tabs.List>
          </Tabs.Root>
        </div>
      ))}
    </div>
  )
}

Contained

The contained variant supports only two sizes: sm and md

import type {ReactElement} from "react"

import {Code, Cpu, FileText, Smartphone} from "lucide-react"

import type {QdsTabsSize} from "@qualcomm-ui/qds-core/tabs"
import {Tab, Tabs} from "@qualcomm-ui/react/tabs"

const sizes: QdsTabsSize[] = ["sm", "md"]

export function TabsContainedSizesDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-6">
      {sizes.map((size) => (
        <Tabs.Root
          key={size}
          defaultValue="documents"
          size={size}
          variant="contained"
        >
          <Tabs.List>
            <Tab.Root value="documents">
              <Tab.Button endIcon={FileText}>Documents</Tab.Button>
            </Tab.Root>
            <Tab.Root value="products">
              <Tab.Button endIcon={Smartphone}>Products</Tab.Button>
            </Tab.Root>
            <Tab.Root value="software">
              <Tab.Button endIcon={Code}>Software</Tab.Button>
            </Tab.Root>
            <Tab.Root value="hardware">
              <Tab.Button endIcon={Cpu}>Hardware</Tab.Button>
            </Tab.Root>
          </Tabs.List>
        </Tabs.Root>
      ))}
    </div>
  )
}

Lazy Mounted

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

This component has been alive for 0 seconds

import {type ReactElement, useEffect, useState} from "react"

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

export function TabsLazyMountedDemo(): ReactElement {
  return (
    <Tabs.Root className="w-80" defaultValue="tab-1" lazyMount unmountOnExit>
      <Tabs.List>
        <Tabs.Indicator />
        <Tab.Root value="tab-1">
          <Tab.Button>Tab 1</Tab.Button>
        </Tab.Root>
        <Tab.Root value="tab-2">
          <Tab.Button>Tab 2</Tab.Button>
        </Tab.Root>
        <Tab.Root value="tab-3">
          <Tab.Button>Tab 3</Tab.Button>
        </Tab.Root>
      </Tabs.List>
      <Tabs.Panel value="tab-1">
        <TabContent />
      </Tabs.Panel>
      <Tabs.Panel value="tab-2">
        <TabContent />
      </Tabs.Panel>
      <Tabs.Panel value="tab-3">
        <TabContent />
      </Tabs.Panel>
    </Tabs.Root>
  )
}

function TabContent() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1)
    }, 1000)
    return () => {
      clearInterval(interval)
    }
  }, [])

  return (
    <div className="font-body-sm text-neutral-primary">
      <span>This component has been alive for</span>
      <span className="font-body-sm-bold text-brand-primary">{` ${count} `}</span>
      <span>seconds</span>
    </div>
  )
}

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

import {type ReactElement, useEffect, useState} from "react"

import {useSearchParams} from "react-router"

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

const tabValues = ["documents", "products", "software", "hardware"]

export function TabsLinksDemo(): ReactElement {
  const [searchParams, setSearchParams] = useSearchParams()

  const [value, setValue] = useState<string>(
    searchParams.get("tab") || "documents",
  )

  useEffect(() => {
    // handle back/forward navigation
    const tab = searchParams.get("tab")
    if (tab && tabValues.includes(tab)) {
      setValue(tab)
    }
  }, [searchParams])

  const handleTabChange = (newValue: string) => {
    setValue(newValue)
    setSearchParams({tab: newValue}, {preventScrollReset: true})
  }

  return (
    <Tabs.Root onValueChange={handleTabChange} value={value}>
      <Tabs.List>
        <Tabs.Indicator />
        <Tab.Root value="documents">
          <Tab.Button>Documents</Tab.Button>
        </Tab.Root>
        <Tab.Root value="products">
          <Tab.Button>Products</Tab.Button>
        </Tab.Root>
        <Tab.Root value="software">
          <Tab.Button>Software</Tab.Button>
        </Tab.Root>
        <Tab.Root value="hardware">
          <Tab.Button>Hardware</Tab.Button>
        </Tab.Root>
      </Tabs.List>
      <Tabs.Panel value="documents">Documents</Tabs.Panel>
      <Tabs.Panel value="products">Products</Tabs.Panel>
      <Tabs.Panel value="software">Software</Tabs.Panel>
      <Tabs.Panel value="hardware">Hardware</Tabs.Panel>
    </Tabs.Root>
  )
}

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>

Dismissable Tabs

Use <Tab.DismissButton> to make tabs removable. Combine this with React state to create a dynamic tab interface where users can add and close tabs.

Tab Content 1

import {type ReactElement, type ReactNode, useState} from "react"

import {Plus} from "lucide-react"

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

interface Item {
  content: ReactNode
  id: string
  title: string
}

const items: Item[] = [
  {content: "Tab Content", id: "1", title: "Tab"},
  {content: "Tab Content", id: "2", title: "Tab"},
  {content: "Tab Content", id: "3", title: "Tab"},
  {content: "Tab Content", id: "4", title: "Tab"},
]

export function TabsAddRemoveDemo(): ReactElement {
  const [tabs, setTabs] = useState<Item[]>(items)
  const [selectedTab, setSelectedTab] = useState<string | null>(items[0].id)

  const addTab = () => {
    const newTabs = [...tabs]

    newTabs.push({
      content: `Tab Content`,
      id: `${parseInt(tabs[newTabs.length - 1]?.id ?? "0") + 1}`,
      title: `Tab`,
    })

    setTabs(newTabs)
    setSelectedTab(newTabs[newTabs.length - 1].id)
  }

  const removeTab = (id: string) => {
    if (tabs.length > 1) {
      const newTabs = [...tabs].filter((tab) => tab.id !== id)
      setTabs(newTabs)
      if (selectedTab === id) {
        setSelectedTab(newTabs[0].id)
      }
    }
  }

  return (
    <Tabs.Root
      className="w-full"
      onValueChange={setSelectedTab}
      size="sm"
      value={selectedTab}
    >
      <Tabs.List>
        <Tabs.Indicator />
        {tabs.map((item) => (
          <Tab.Root key={item.id} value={item.id}>
            <Tab.Button>
              {item.title} {item.id}
            </Tab.Button>
            <Tab.DismissButton onClick={() => removeTab(item.id)} />
          </Tab.Root>
        ))}
        <Button onClick={addTab} size="sm" startIcon={Plus} variant="ghost">
          Add Tab
        </Button>
      </Tabs.List>

      {tabs.map((item) => (
        <Tabs.Panel key={item.id} value={item.id}>
          <div className="font-heading-xs text-neutral-primary my-6">
            {item.content} {item.id}
          </div>
        </Tabs.Panel>
      ))}
    </Tabs.Root>
  )
}

Dismissable Tabs (Contained)

When using the contained tab variant, the dismiss icon only shows on hover.

Tab Content 1

import {type ReactElement, type ReactNode, useState} from "react"

import {Plus} from "lucide-react"

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

interface Item {
  content: ReactNode
  id: string
  title: string
}

const items: Item[] = [
  {content: "Tab Content", id: "1", title: "Tab label"},
  {content: "Tab Content", id: "2", title: "Tab label"},
  {content: "Tab Content", id: "3", title: "Tab label"},
  {content: "Tab Content", id: "4", title: "Tab label"},
]

export function TabsAddRemoveContainedDemo(): ReactElement {
  const [tabs, setTabs] = useState<Item[]>(items)
  const [selectedTab, setSelectedTab] = useState<string | null>(items[0].id)

  const addTab = () => {
    const newTabs = [...tabs]

    newTabs.push({
      content: `Tab Content`,
      id: `${parseInt(tabs[newTabs.length - 1]?.id ?? "0") + 1}`,
      title: `Tab`,
    })

    setTabs(newTabs)
    setSelectedTab(newTabs[newTabs.length - 1].id)
  }

  const removeTab = (id: string) => {
    if (tabs.length > 1) {
      const newTabs = [...tabs].filter((tab) => tab.id !== id)
      setTabs(newTabs)
      if (selectedTab === id) {
        setSelectedTab(newTabs[0].id)
      }
    }
  }

  return (
    <Tabs.Root
      className="w-full"
      onValueChange={setSelectedTab}
      size="sm"
      value={selectedTab}
      variant="contained"
    >
      <Tabs.List>
        <Tabs.Indicator />
        {tabs.map((item) => (
          <Tab.Root key={item.id} value={item.id}>
            <Tab.Button>
              {item.title} {item.id}
            </Tab.Button>
            <Tab.DismissButton onClick={() => removeTab(item.id)} />
          </Tab.Root>
        ))}
        <Button onClick={addTab} size="sm" startIcon={Plus} variant="ghost">
          Add Tab
        </Button>
      </Tabs.List>

      {tabs.map((item) => (
        <Tabs.Panel key={item.id} value={item.id}>
          <div className="font-heading-xs text-neutral-primary my-6">
            {item.content} {item.id}
          </div>
        </Tabs.Panel>
      ))}
    </Tabs.Root>
  )
}

Explorer

Documents content

Component Anatomy

Hover to highlight, click to view API

root list tab tab-button tab-dismiss-button indicator panel

API

Tabs

<Tabs.Root>

Groups all parts of the tabs. Renders a <div> element by default.

Prop	Type	Default
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.

Attribute / Property	Value
`className`	'qui-tabs__root'
`data-focus`
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'root'

className

Value

'qui-tabs__root'

data-focus

Value

data-orientation

Value

| 'horizontal'
| 'vertical'

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'root'

<Tabs.List>

Container for the tab buttons. Renders a <div> element by default.

Prop	Type
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.

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

Attribute / Property	Value
`className`	'qui-tabs__list'
`data-focus`
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'list'
`data-variant`	\| 'line' \| 'contained'

className

Value

'qui-tabs__list'

data-focus

Value

data-orientation

Value

| 'horizontal'
| 'vertical'

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'list'

data-variant

Value

| 'line'
| 'contained'

<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.

Prop	Type
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)

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

Attribute / Property	Value
`className`	'qui-tabs__indicator'
`data-animate`
`data-focus` Whether any tab has the simulated focus state.
`data-focus-visible` Whether any tab has the simulated focus-visible state.
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'indicator'
`data-variant`	\| 'line' \| 'contained'
`hidden` Hidden for `contained` variant.	boolean
`style`	CSSProperties

className

Value

'qui-tabs__indicator'

data-animate

Value

data-focus

Value

Description

Whether any tab has the simulated focus state.

data-focus-visible

Value

Description

Whether any tab has the simulated focus-visible state.

data-orientation

Value

| 'horizontal'
| 'vertical'

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'indicator'

data-variant

Value

| 'line'
| 'contained'

hidden

Value

boolean

Description

Hidden for contained variant.

style

Value

CSSProperties

<Tabs.Panel>

Content area associated with a tab. Renders a <div> element by default.

Prop	Type
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.

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

Attribute / Property	Value
`className`	'qui-tabs__panel'
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-ownedby`	string
`data-selected`
`data-tabs-part`	'panel'
`hidden`	boolean
`style`	{ display: 'none' }
`tabIndex`	-1 \| 0

className

Value

'qui-tabs__panel'

data-orientation

Value

| 'horizontal'
| 'vertical'

data-ownedby

Value

string

data-selected

Value

data-tabs-part

Value

'panel'

hidden

Value

boolean

style

Value

{
  display: 'none'
}

tabIndex

Value

-1 | 0

Tab

<Tab.Root>

Groups all parts of a single tab. Renders a <div> element by default.

Prop	Type
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

Attribute / Property	Value
`className`	'qui-tab__root'
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'tab'
`data-variant`	\| 'line' \| 'contained'

className

Value

'qui-tab__root'

data-orientation

Value

| 'horizontal'
| 'vertical'

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'tab'

data-variant

Value

| 'line'
| 'contained'

<Tab.Button>

Button that activates its associated tab panel. Renders a <button> element by default.

Prop	Type
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.

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.

Attribute / Property	Value
`className`	'qui-tab__button'
`data-disabled`
`data-focus`
`data-focus-visible`
`data-indicator-rendered`
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-ownedby`	string
`data-selected`
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'tab-button'
`data-value`	string
`data-variant`	\| 'line' \| 'contained'
`tabIndex`	-1 \| 0

className

Value

'qui-tab__button'

data-disabled

Value

data-focus

Value

data-focus-visible

Value

data-indicator-rendered

Value

data-orientation

Value

| 'horizontal'
| 'vertical'

data-ownedby

Value

string

data-selected

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'tab-button'

data-value

Value

string

data-variant

Value

| 'line'
| 'contained'

tabIndex

Value

-1 | 0

<Tab.DismissButton>

Button that dismisses a tab. Renders a <button> element by default.

Prop	Type
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

Attribute / Property	Value
`className`	'qui-tab__dismiss-button'
`data-size`	\| 'sm' \| 'md' \| 'lg' \| 'xl'
`data-tabs-part`	'tab-dismiss-button'
`tabIndex`	-1

className

Value

'qui-tab__dismiss-button'

data-size

Value

| 'sm'
| 'md'
| 'lg'
| 'xl'

data-tabs-part

Value

'tab-dismiss-button'

tabIndex

Value

-1

<Tabs.Context>

Prop	Type
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

Prop	Type
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.

Last updated on Jul 27, 2026 by Ryan Bower

Table

Tag