Tabs

Components > Content Layout > Tabs

Use this component to...

Organize content into sub-sections, only one of which is visible at a time

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Tabs allow applications to present a related set of content views within a small area, with only one content view displayed at a time. Each tab has a header with a brief text description of its content. Clicking on a tab header displays the content for that tab, hiding the content for all other tabs.

The tab component offers horizontal scrolling for tab headers when the width of all headers is greater than the available screen width. This generally works well on desktop systems, but the amount of scrolling that occurs at smaller screen widths (such as mobile) can make the tab component more difficult to work with in those environments. For this reason, it can be better to use the accordion functionality in the group box component at mobile size. This works similar to the tab component except the headers are displayed vertically, with the content displayed within whichever group box is expanded. Like the tab component, group boxes in accordion mode only display the content for the selected (expanded) group box.

Tabs only display the content of the currently selected tab, so when the user prints the page, the printout will only include the data in the currently selected tab. The same is true for a group box in accordion mode; only the content for the currently expanded group box will print. If users need a printout to include the data within all tabs and group boxes, you should provide a print-friendly version of this data.

Tab component with 3 tabs

Savings account content

Checking account content

Loan content

The accordion group box is similar to a tab component, although it displays vertically instead of horizontally.

Content

Development

Web component development

Component reference

rui-tabset

Module: rui-tabs - Package: @jkhy/responsive-ui-wc

Displays a horizontal list of options, with detail displayed for exactly one of those options

Name	Type	Default	Description
selectedTabId	string	''	Contains the auto-generated id of the currently selected tab
rui-selected-tab-change	event		Fires when the selected tab changes. The selected tab ID is passed as the event detail.
showTabByPosition(tabPosition)	method		Show the tab that’s in the specified 0-based position. The `tabPosition` parameter is a number between 0 and one less than the number of tabs in the tabset.
showTabByLabel(tabLabel)	method		Show the first tab that has the specified label.

rui-tab

Module: rui-tabs - Package: @jkhy/responsive-ui-wc

An individual tab in a tabset

Name	Type	Default	Description
labelText	string	''	Text displayed in the tab header
badge	string	''	Optional text highlighted in the tab header. Can be used to indicate a quick count of data items in the tab or some other text to highlight for the tab.
isDisabled	boolean	false	Specifies whether the tab is disabled.

Implementation

Begin by importing the rui-tabs module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-tabs/rui-tabs-imports';

Add a rui-tabset element for each tab component. Nest a rui-tab element within the rui-tabset for each tab header, using the labelText property to specify the tab header text.

Tabset with 4 tabs, the 4th of which is disabled

<rui-tabset>

    <rui-tab labelText="Savings Accounts">
        Tab 1 content
    </rui-tab>

    <rui-tab labelText="Checking Accounts">
        Tab 2 content
    </rui-tab>

    <rui-tab labelText="Loans" badge="NEW">
        Tab 3 content
    </rui-tab>

    <rui-tab labelText="Disabled" isDisabled="true">
        Disabled tab content
    </rui-tab>
    
</rui-tabset>

Angular component development

Component reference

jha-tabset

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Displays a horizontal list of options, with detail displayed for exactly one of those options

Name	Type	Default	Description
showTabByPosition(tabPosition)	method		Show the tab that’s in the specified 0-based position. The `tabPosition` parameter is a number between 0 and one less than the number of tabs in the tabset.
showTabByLabel(tabLabel)	method		Show the first tab that has the specified label.

jha-tab

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

An individual tab in a tabset

Name	Type	Default	Description
jhaLabelText	string	''	Text displayed in the tab header
jhaBadge	string	''	Optional text highlighted in the tab header. Can be used to indicate a quick count of data items in the tab or some other text to highlight for the tab.
jhaIsDisabled	boolean	false	Specifies whether the tab is disabled.

Implementation

Begin by importing the JhaLayoutModule module into your application.

Import the module

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

Add a jha-tabset element for each tab component. Nest a jha-tab element within the jha-tabset for each tab header, using the jhaLabelText property to specify the tab header text.

Tabset with 4 tabs, the 4th of which is disabled

<jha-tabset>

    <jha-tab jhaLabelText="Savings Accounts">
        Tab 1 content
    </jha-tab>

    <jha-tab jhaLabelText="Checking Accounts">
        Tab 2 content
    </jha-tab>

    <jha-tab jhaLabelText="Loans" jhaBadge="NEW">
        Tab 3 content
    </jha-tab>

    <jha-tab jhaLabelText="Disabled" jhaIsDisabled="true">
        Disabled tab content
    </jha-tab>
    
</jha-tabset>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Content Layout page in the Figma UI Kit.

Dev Component	Design Component Name
Tab bar	RUI / Layout / Tabs / Tab Bar
Tab	RUI / Layout / Tabs / Tab Available values for the State property: Active Inactive Disabled

Dev Component

Design Component Name

Tab bar

RUI / Layout / Tabs / Tab Bar

Tab

RUI / Layout / Tabs / Tab

Available values for the State property:

Active
Inactive
Disabled

Add the base tab bar and resize its width to match its container’s width.

Add one active tab directly above the tab bar; change its title to an appropriate value.

Then add one or more inactive tabs directly above the tab bar; change the title in each to an appropriate value.

You can change the width of the active and inactive tabs to fit their title if needed.

Display sample content for the active tab.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App – Tabs
Sample App - Content Layout

Dev Component	Design Component Name
Tab bar	JHA / Layout / Tabs / Tab Bar
Tab - active	JHA / Layout / Tabs / Tab / Active
Tab - inactive	JHA / Layout / Tabs / Tab / Inactive

Add the base tab bar and resize its width to match its container’s width.

Add one active tab directly above the tab bar; change its title to an appropriate value.

Then add one or more inactive tabs directly above the tab bar; change the title in each to an appropriate value.

You can change the width of the active and inactive tabs to fit their title if needed.

Display sample content for the active tab.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Tue Jun 6 2023