TabPanel | Neural UI v2

Usage

Place TabPanel directly inside Tabs and set its required tabId to the matching item id. Its projected content is rendered only while that tab is active. It is not an independent visibility container. Use the parent Tabs for activeId, label Templates and selection events.

Examples

Try the behavior and inspect the executable source in Code.

Review the order details before continuing.

Try and configure

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

Order summary

Projected panel content

<neu-tabs
  [tabs]="tabs()"
  [activeId]="active()"
  (activeIdChange)="active.set($event)"
  ariaLabel="Order sections"
>
  <neu-tab-panel tabId="summary">
    <p>Order summary</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="activity">
    <p>Each panel belongs to a tab ID.</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="archive">
    <p>—</p>
  </neu-tab-panel>
</neu-tabs>

Data, callback and structured configuration inputs

Data and content

tabId is an Input. TabPanel has no Outputs and delegates selection to Tabs. Projected application content keeps its own state and handlers.

Accessibility and keyboard

The parent links the selected tab to its panel through generated IDs. Keep a panel for every tab, including disabled items. Put form controls and actions in the panel, not inside the tab button.

Key	Action
`Tab`	Follow the normal focus order of links, fields and actions inside the content; the container adds no roving-focus model.
`Enter`	Activate a focused native button or follow a focused link inside the content.
`Space`	Activate a focused native button inside the content; fields keep normal text editing.

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
`tabId`	`K`	Required	`[tabId]`	Required key matching an item in the parent Tabs.

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
`*` Active panel content View example	Content projection Project application content inside the matching parent Tabs.	`<ng-content />` Context used: `—`

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

Panel content

*

Panel content can contain application controls.

Confirmations: 0

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
No data

Related components

Combine these components to build the surrounding interface.