Tabs | Neural UI v2

Usage

Provide tabs with stable ids, labels and optional badges or disabled state. Project one neu-tab-panel with a matching tabId for every tab. activeId plus activeIdChange gives the application control; otherwise initialActiveId is a one-time seed and the component manages selection. null intentionally selects no panel. NeuTabLabel customizes the tab label, not the panel.

Examples

Try the behavior and inspect the executable source in Code.

Three updates are available.

Use Arrow keys to move focus. Enter or Space activates the focused tab.

Try and configure

Change the options, try the result and inspect its generated template. Open Code for the full implementation.

Review the order details before continuing.

activeId: summary

Remove Activity from the model

Flush panel spacing

Accessible name

<neu-tabs
  [tabs]="tabs()"
  [activeId]="active()"
  (activeIdChange)="active.set($event)"
  [flush]="false"
  ariaLabel="Order sections"
>
  <neu-tab-panel tabId="summary">
    <p>Review the order details before continuing.</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="activity">
    <p>Three updates are available.</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="archive">
    <p>Archived content</p>
  </neu-tab-panel>
</neu-tabs>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const tabs = signal([
  {
    "id": "summary",
    "label": "Summary"
  },
  {
    "id": "activity",
    "label": "Activity",
    "badge": "3"
  },
  {
    "id": "archive",
    "label": "Archive",
    "disabled": true
  }
]);

export const active = signal("summary");

Data, callback and structured configuration inputs

Data and content

activeIdChange proposes a tab key or null. In controlled mode, update activeId to accept the proposal. Do not switch between controlled and uncontrolled mode on the same instance.

Accessibility and keyboard

Arrow Left/Right, Home and End move focus among enabled tabs. Enter or Space activates the focused tab; focus alone does not change selection. Give the tablist a meaningful ariaLabel. Narrow tab bars scroll horizontally.

Key	Action
`Tab`	Enter the tablist or reach controls in the active panel.
`ArrowLeft / ArrowRight`	Move focus between enabled tabs without changing selection.
`Home`	Focus the first enabled tab.
`End`	Focus the last enabled tab.
`Enter`	Activate the focused tab.
`Space`	Activate the focused tab.

API

Inputs and Outputs match the pinned Core package. Named types link to their definitions. Templates include executable examples for each supported region.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`activeId`	`K \| null \| undefined`	`undefined`	`[activeId]`	Applied tab id; null selects none, undefined enables uncontrolled mode.
`ariaLabel`	`string`	`'Content tabs'`	`[ariaLabel]`	Accessible name of the tablist.
`flush`	`boolean`	`false`	`[flush]`	Remove the default space above projected panels.
`initialActiveId`	`K \| null`	`null`	`[initialActiveId]`	One-time selection seed when activeId is omitted; null falls back to the first enabled tab.
`tabs`	`readonly T[]`	`[]`	`[tabs]`	Tab definitions: unique id, label, optional badge and disabled flag.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`activeIdChange`	`K \| null`	`(activeIdChange)="onActiveIdChange($event)"`	Proposes the next active key or null; accept by updating activeId.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Content panels View example	Content projection Project one TabPanel for each tab ID.	`<ng-content />` Context used: `—`
`NeuTabLabelDirective` Tab label View example	Public template directive (entrypoint) Use let-tab and let-active="active" to customize the label; do not nest interactive controls inside the button.	`ng-template[neuTabLabel]` Context used: `$implicit: tab, active: boolean`

*

Content panels

View example

Content projection

Project one TabPanel for each tab ID.

<ng-content />

Context used: —

NeuTabLabelDirective

Tab label

View example

Public template directive (entrypoint)

Use let-tab and let-active="active" to customize the label; do not nest interactive controls inside the button.

ng-template[neuTabLabel]

Context used: $implicit: tab, active: boolean

Declaration

import type { NeuTab } from '@neural-ui/core/tabs';
import type { NeuTabKey } from '@neural-ui/core/tabs';

import { NeuTabLabelDirective } from '@neural-ui/core/tabs';

// Public declaration (reference only)
export declare class NeuTabLabelDirective<T extends NeuTab<NeuTabKey> = NeuTab<NeuTabKey>> {
}

Full context

import type { NeuTabLabelContext } from '@neural-ui/core/tabs';

import { NeuTabLabelDirective } from '@neural-ui/core/tabs';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuTabLabelContext<T>>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Content panels

*

Review the order details before continuing.

Tab label

NeuTabLabelDirective

Review the order details before continuing.

Public Types

Open a type to inspect its definition and interface fields.

NeuTabTypeScript

import type { NeuTabKey } from '@neural-ui/core/tabs';

import type { NeuTab } from '@neural-ui/core/tabs';

// Public declaration (reference only)
interface NeuTab<K extends NeuTabKey = string> {
  readonly badge?: string;
  readonly disabled?: boolean;
  readonly id: K;
  readonly label: string;
}

NeuTabKeyTypeScript

NeuTabLabelContextTypeScript

import type { NeuTab } from '@neural-ui/core/tabs';
import type { NeuTabKey } from '@neural-ui/core/tabs';

import type { NeuTabLabelContext } from '@neural-ui/core/tabs';

// Public declaration (reference only)
interface NeuTabLabelContext<T extends NeuTab<NeuTabKey> = NeuTab<NeuTabKey>> {
  readonly $implicit: T;
  readonly active: boolean;
}

Styles and tokens

Use public tokens for surfaces, text, spacing and focus. Test your content in both themes and at narrow widths.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-light`	Light brand shade; outline and ghost Button text in the dark theme	Shared by other Core consumers; scope the override.	`#339dff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`

Related components

Combine these components to build the surrounding interface.