Tab Component

Usage

Tabs let people switch between related panels of content in the same space. A Tab Group is the container; inside it, each Tab (with slot="tab") is paired with the Tab Panel that follows it.

Import the parts you need — each import registers its custom element:

import "@nordhealth/components/lib/TabGroup"
import "@nordhealth/components/lib/Tab"
import "@nordhealth/components/lib/TabPanel"

Then assemble a group of tabs and panels:

Composition

A Tab Group holds an alternating sequence of tabs and panels. Each tab is placed in the tab slot and is matched, in order, to the panel that follows it.

TabGroup
├── Tab        (slot="tab")
├── TabPanel
├── Tab        (slot="tab")
└── TabPanel

<nord-tab-group label="Workspace">
  <nord-tab slot="tab">Overview</nord-tab>
  <nord-tab-panel>…</nord-tab-panel>
  <nord-tab slot="tab">Projects</nord-tab>
  <nord-tab-panel>…</nord-tab-panel>
</nord-tab-group>

Tab Group is the container that coordinates the tabs and panels and manages keyboard focus. Give it a label for an accessible name; sticky keeps the tab strip visible while the panel scrolls, and padding controls the panel spacing.

Tab

Tab is a single tab. Place it in the tab slot and keep its label short. Use selected to mark the active tab. Tabs switch panels — they don't navigate to other pages; use Navigation or links for that.

Tab Panel

Tab Panel holds the content for the tab at the same position. It can contain both static and interactive content.

Examples

Basic

A labelled group with three tabs.

Sticky tabs with cards

Use sticky to keep the tab strip in view while the panel scrolls, and padding to space the panel content.

RTL

Tabs follow the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

Give the Tab Group a label so the set of tabs has an accessible name.
The Tab Group implements the tabs keyboard pattern: arrow keys move between tabs and the matching panel is revealed, with aria-selected and the tab/panel relationship managed for you.
Keep Tab labels short and descriptive, and don't use tabs to navigate between pages — use Navigation or links instead.

Templates

See this component composed into complete application views:

Tabs Template

A view that organises content across tabbed panels.

Ready

API reference

Tab

The interactive tab button for use within the tab group component.

<nord-accordion></nord-accordion>

Props

Property	Attribute	Description	Type	Default
`selected`	`selected`	Whether the tab item is selected	`boolean`	`false`

Slots

Slot name	Description
`Default slot`	The tab button content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-tab-color`	Controls the text color of the tab, using our color tokens.	`var(--n-color-text-weak)`
`--n-tab-font-weight`	Controls the font weight of the tab, using our font tokens.	`var(--n-font-weight)`

Parts

This component is made up of the following parts.

Tab Group

Tab Group allows multiple panels to be contained within a single window, using tabs as a navigational element.

<nord-accordion-header></nord-accordion-header>

Props

Property	Attribute	Description	Type	Default
`label`	`label`	Adds an accessible label to the tab list container.	`string`	`''`
`padding`	`padding`	Controls the padding of the tab group component.	`'m' \| 'l' \| 'none' \| undefined`	`'m'`
`sticky`	`sticky`	Whether the tab list sticks to the top of the tab group as you scroll.	`boolean`	`false`

Slots

Slot name	Description
`Default slot`	The element which contains the content to be revealed.
`tab`	The element which contains all tabs to reveal tabbed content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-tab-group-padding`	Controls the padding around the tab group (including the tab list), using our spacing tokens.	`0`

Tab Panel

The panel which contains content that can be revealed using a tab in the tab group component.

<nord-accordion-item></nord-accordion-item>

Slots

Slot name	Description
`Default slot`	The tab panel content.

Design guidelinesFor designers

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

Use the tab component within the tab group component.
Use the selected option to signify if the tab is selected.
Use text, icons and other non-interactive content within the tab.

Don’t

Don’t use tabs to navigate to other pages. Use navigation or links instead.
Don't use the tab component outside of the tab group component.
Don't add interactive elements, such as buttons and links, inside the tab component.

Content guidelines

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks

My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

Dashboard

The dashboard

Avoid ending tab labels in punctuation:

Patients

Patients.

Use as few words as possible to describe each tab label:

Payments

Payments in your clinic

Avoid all caps for tab labels:

Dashboard

DASHBOARD

Additional considerations

If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
If there is a particular section you wish to show out of order of the tabs UI itself consider using the selected option to select the tab but prevent the order of the tabs being affected.