Tab Container

Updated:

Use for switching between multiple views within the same context.

Development

Nested and Secondary Tabs

Secondary tab styles are available when you want a tabbed view outside the main page content (such as in a sidebar), or when you want to nest a tab view within another tab. To implement the secondary tab styles:

  • Set type="section" on the secondary or nested tabs to provide visual distinction from top-level tabs. Doing so sets font-size: inherit on the nested tab controls.
  • Set color="alt" on the secondary or nested tabs. This sets color: inherit on the nested tab controls, avoiding text contrast issues.

First tab content.

The nested tabs below are within this tab's content.

First nested tab content.

Second nested tab content.

Second tab content.

Notice that the nested tabs from "First tab" are no longer present.

 
<q2-tab-container value="1-1" name="top">
  <q2-tab-pane label="First Tab" value="1-1" name="top">
    <p><strong>First tab</strong> content.</p>
    <p>The nested tabs below are within this tab's content.</p>
    <q2-tab-container type="section" value="2-1" color="alt" name="child">
      <q2-tab-pane label="First Nested Tab" value="2-1" name="child">
        <p><strong>First nested tab</strong> content.</p>
      </q2-tab-pane>
      <q2-tab-pane label="Second Nested Tab" value="2-2" name="child">
        <p><strong>Second nested tab</strong> content.</p>
      </q2-tab-pane>
    </q2-tab-container>
  </q2-tab-pane>
  <q2-tab-pane label="Second Tab" value="1-2" name="top">
    <p><strong>Second tab</strong> content.</p>
    <p>Notice that the nested tabs from "First tab" are no longer present.</p>
  </q2-tab-pane>
</q2-tab-container>

Accessibility

The following keyboard commands will navigate between tabs and into the tab content:

  • While the tabs are blurred, use the Tab key to focus an individual tab in the tab container.
  • When focused on a tab:
    • The ← key focuses the previous tab.
    • The → key focuses the next tab.
    • The Tab key focuses the first focusable item within the focused tab's content.
    • The Home key focuses the first tab.
    • The End key focuses the last tab.
    • The Space and Enter keys display the focused tab.

Properties

Learn more about properties.

color

Controls which variables are used to color the tab controls.

  • undefined (default)
    • Uses --t-tab-active and --t-tab-inactive.
  • alt
    • Uses --t-tab-alt-active and --t-tab-alt-inactive.
    • The default fallback for these variables is inherit.
name

Used to establish a relationship between q2-tab-container and its associated tab panes.

The element can fail if this property is not set. Nested tab containers without the name property will not render correctly.

noPrint
no-print

Controls visibility of tab list in a print view. Tab content will still be visible even if noPrint is true.

type

Determines the font size of the tab controls.

value

Corresponds to the value of the selected tab pane.

Events

The q2-tab-container element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

Emitted when the selected tab changes.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • onchange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("change") method - The default handler will fire alongside the custom handler.

settled

Emitted when the component has finished rendering.

Event Detail Type signature

undefined

tctChange

Emitted when the selected tab changes.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • ontctChange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("tctChange") method - The default handler will fire alongside the custom handler.

Methods

The q2-tab-container element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

selectTab

Test only

A method to select a tab pane corresponding with the value.

Type signature

selectTab(value: string) => Promise<void>

Design

General Guidance

The Nielsen/Norman Group's tab article provides helpful guidance on using tabs in a design. The key guidelines:

  • Use tabs to changes views within the same page/context, not to navigate between different pages or areas.
  • Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.
  • Use tabs only when users don't need to see content from multiple tabs simultaneously.
  • Make it clear which tab is currently selected.
  • Ensure that unselected tabs' labels are clearly visible.
  • Keep tab labels short.
  • Only use a single row of tabs.

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-tab-container component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!