Getting Started
Installation
Theming, Patterns, and Pitfalls
Components
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxComboboxNumber InputPassword InputRadioSelectSwitchText Input
Data Display
AvatarData Grid / TableDividerIconLinkSegmented ControlTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationTabs
Feedback
Inline NotificationProgressProgress RingToast Notification

Tabs

import {TabsModule} from "@qualcomm-ui/angular/tabs"

Examples

Horizontal

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

Documents
<div defaultValue="documents" q-tabs-root>
  <div q-tabs-list>
    <div q-tabs-indicator></div>
    <div q-tab-root value="documents">
      <button q-tab-button>Documents</button>
    </div>
    <div q-tab-root value="products">
      <button q-tab-button>Products</button>
    </div>
    <div q-tab-root value="software">
      <button q-tab-button>Software</button>
    </div>
    <div q-tab-root value="hardware">
      <button q-tab-button>Hardware</button>
    </div>
  </div>
  <div q-tabs-panel value="documents">Documents</div>
  <div q-tabs-panel value="products">Products</div>
  <div q-tabs-panel value="software">Software</div>
  <div q-tabs-panel value="hardware">Hardware</div>
</div>

Vertical

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

Documents
<div
  class="w-full"
  defaultValue="documents"
  orientation="vertical"
  q-tabs-root
>
  <div q-tabs-list>
    <div q-tabs-indicator></div>
    <div q-tab-root value="documents">
      <button q-tab-button>Documents</button>
    </div>
    <div q-tab-root value="products">
      <button q-tab-button>Products</button>
    </div>
    <div q-tab-root value="software">
      <button q-tab-button>Software</button>
    </div>
    <div q-tab-root value="hardware">
      <button q-tab-button>Hardware</button>
    </div>
  </div>
  <div q-tabs-panel value="documents">Documents</div>
  <div q-tabs-panel value="products">Products</div>
  <div q-tabs-panel value="software">Software</div>
  <div q-tabs-panel value="hardware">Hardware</div>
</div>

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.

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

@for (size of sizes; track size) {
  <div
    defaultValue="documents"
    q-tabs-root
    variant="contained"
    [size]="size"
  >
    <div q-tabs-list>
      <div q-tab-root value="documents">
        <button q-tab-button>Documents</button>
      </div>
      <div q-tab-root value="products">
        <button q-tab-button>Products</button>
      </div>
      <div q-tab-root value="software">
        <button q-tab-button>Software</button>
      </div>
      <div q-tab-root value="hardware">
        <button q-tab-button>Hardware</button>
      </div>
    </div>
  </div>
}

Disabled

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

URL Search Parameters

The following example demonstrates how to render tabs that sync with the Angular router's query parameters.

Documents

Context

Use the tabsContext structural directive to access the tabs API from the template.

<ng-container *tabsContext="let tabsApi">
  <div q-tabs-panel value="tab-1">
    <button
      endIcon="ChevronRight"
      q-button
      size="sm"
      variant="outline"
      (click)="tabsApi.setValue('tab-2')"
    >
      Go to next tab
    </button>
  </div>
  <div class="flex items-center gap-2" q-tabs-panel value="tab-2">
    <button
      q-button
      size="sm"
      startIcon="ChevronLeft"
      variant="outline"
      (click)="tabsApi.setValue('tab-1')"
    >
      Go to prev tab
    </button>
    <button
      endIcon="ChevronRight"
      q-button
      size="sm"
      variant="outline"
      (click)="tabsApi.setValue('tab-3')"
    >
      Go to next tab
    </button>
  </div>
  <div q-tabs-panel value="tab-3">
    <button
      q-button
      size="sm"
      startIcon="ChevronLeft"
      variant="outline"
      (click)="tabsApi.setValue('tab-2')"
    >
      Go to previous tab
    </button>
  </div>
</ng-container>

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

q-tabs-root

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
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 the 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
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"
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'
(focusChanged)
Callback to be called when the focused tab changes
string
(valueChanged)
Callback to be called when the selected/active tab changes
string
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.
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 the 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.
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.
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.
(focusChanged)
Type
string
Description
Callback to be called when the focused tab changes
(valueChanged)
Type
string
Description
Callback to be called when the selected/active tab changes

q-tabs-list

PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-tabs-indicator

This directive is automatically rendered by the q-tabs-list directive. It can be customized like so:

<div q-tabs-list>
  <!-- customize the element here -->
  <div q-tabs-indicator></div>
  <!-- ... -->
</div>
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-tabs-panel

PropType
value
*
The value of the associated tab
string
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
value
*
Type
string
Description
The value of the associated tab
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

Tab

q-tab-root

PropType
value
*
The value of the tab
string
disabled
Whether the tab is disabled
boolean
value
*
Type
string
Description
The value of the tab
disabled
Type
boolean
Description
Whether the tab is disabled

q-tab-button

PropType
endIcon
lucide-angular icon, positioned after the label.
| LucideIconData
| string
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
startIcon
lucide-angular icon, positioned before the label.
| LucideIconData
| string
endIcon
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned after the label.
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.
startIcon
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned before the label.

q-tab-dismiss-button

PropType
aria-label
string
aria-label
Type
string

tabsContext

Used to access the tabs API from the template.

<div q-tabs-root>
  <!-- type-aware context for the tabs API -->
  <ng-container *tabsContext="let tabsApi">
    <button (click)="tabsApi.setValue('...')"></button>
  </ng-container>
</div>
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.
                          Pagination
                          Inline Notification
                          Examples
                          Horizontal
                          Vertical
                          Icons and variants
                          Controlled Value
                          Sizes
                          Line
                          Contained
                          Disabled
                          URL Search Parameters
                          Context
                          Add and Remove Tabs
                          API
                          Tabs
                          q-tabs-root
                          q-tabs-list
                          q-tabs-indicator
                          q-tabs-panel
                          Tab
                          q-tab-root
                          q-tab-button
                          q-tab-dismiss-button
                          tabsContext
                          Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.