Tab

The <nys-tab> acts as a clickable interface to toggle between different sets of information without leaving the page. It is not intended for page navigation.

Accessibility

The nys-tab component includes the following accessibility-focused features:

• Keyboard Navigation: Users can navigate between tabs using the arrow keys, and activate a tab with the Enter or Space key.

• ARIA Roles and Attributes: The component uses appropriate ARIA roles (e.g., tablist, tab, tabpanel) and attributes (e.g., aria-selected, aria-controls) to ensure that assistive technologies can correctly interpret the structure and state of the tabs.

  Additional accessibility test and build content is coming soon, in a new format.

Options

Pre-selected Tab

To pre-select a tab on load, add the selected attribute to a <nys-tab> element. If no tab has selected, the first tab is activated by default.

<nys-tabgroup>
<nys-tab label="Marcy"></nys-tab>
<nys-tab label="Algonquin" selected></nys-tab>
...rest of the tabs...
<nys-tabpanel>content inside the tab panel</nys-tabpanel>
<nys-tabpanel>content inside the tab panel</nys-tabpanel>
...rest of the tabpanels...
</nys-tabgroup>

Disabled Tabs

To disable a tab, add the disabled attribute to the <nys-tab> element. Disabled tabs will not be clickable and will have a different visual style to indicate that they are inactive.

<nys-tabgroup>
<nys-tab label="Marcy"></nys-tab>
<nys-tab label="Algonquin"></nys-tab>
...
<nys-tab label="Gore (Not a High Peak)" disabled></nys-tab>
<nys-tabpanel>content inside the tab panel</nys-tabpanel>
<nys-tabpanel>content inside the tab panel</nys-tabpanel>
...rest of the tabpanels...
</nys-tabgroup>

Explicit Ordering

<nys-tabgroup id="explicit-ordering">
<nys-tab label="1st Tab" id="tab1"></nys-tab>
<nys-tab label="2nd Tab" id="tab2"></nys-tab>
<nys-tab label="3rd Tab" id="tab3"></nys-tab>
<nys-tabpanel aria-labelledby="tab2">Content for tab 2</nys-tabpanel>
<nys-tabpanel aria-labelledby="tab3">Content for tab 3</nys-tabpanel>
<nys-tabpanel aria-labelledby="tab1">Content for tab 1</nys-tabpanel>
</nys-tabgroup>

Usage

When to use this component

• Use a tabs component to organize related content into distinct, manageable sections, reducing cognitive load and saving screen space
• When you need to categorize related, but separate, information within the same context (e.g., Overview, Specs, Reviews).
• When you need to display a large amount of content without making the page overwhelmingly long.

When to consider something else

• Comparing Data: If the user needs to compare information between sections simultaneously, tabs are poor, as they require clicking back and forth.
• Linear Process: If the content represents a strict, step-by-step process, use a Stepper component indicator instead.
• Too Few Categories: If you only have two small pieces of content, it might be better to just display them consecutively.

Properties

Style Overrides

nys-component {
  --nys-component-background-color: var(--nys-color-accent);
  --nys-component-color: var(--nys-color-ink);
}

Events

The <nys-tab> component emits three custom JavaScript events:

1. nys-tab-select – Fired when a tab is activated via click or Enter / Space.
2. nys-tab-focus – Fired when a tab receives focus.
3. nys-tab-blur – Fired when a tab loses focus.

Event details

The nys-tab-select event includes a detail object with the following properties:

• id (string): The id of the activated tab.
• label (string): The label of the activated tab.

The nys-tab-focus and nys-tab-blur events include:

• id (string): The id of the tab.

You can listen to these events using JavaScript:

const tabgroup = document.querySelector('nys-tabgroup');
tabgroup.addEventListener('nys-tab-select', (event) => {
const { id, label } = event.detail;
console.log(`Tab selected — id: ${id}, label: ${label}`);
});