Tabs for Angular

import { AuiTabs } from '@absoluteui/angular/tabs';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Tabs page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { tabs: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiTabs } from '@absoluteui/angular/tabs';

@Component({
  selector: 'app-account',
  imports: [AuiTabs],
  template: `<aui-tabs label="Account" [tabs]="tabs" [value]="selected" (changed)="selected = $event.value"></aui-tabs>`,
})
export class AccountComponent {
  readonly tabs = [
    { id: 'overview', label: 'Overview', content: 'Plan, usage, and contacts.' },
    { id: 'billing', label: 'Billing', content: 'Invoices and payment methods.' },
  ];
  selected = 'overview';
}

<aui-tabs>

Class AuiTabs; template reference #ref="auiTabs".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the tablist (aria-label).
tabs	readonly TabItem[]		Required. Tabs in order. Ids must be unique; they are consumer keys, not DOM ids.
activation	TabsActivation	'automatic'	automatic selects on focus; manual needs Enter or Space.
orientation	TabsOrientation	'horizontal'	Layout and arrow keys (Left/Right or Up/Down).
direction	Direction	'ltr'	Mirrors Left/Right in rtl. An ancestor dir=rtl also mirrors.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string	(valueChange)	Selected tab id. Default: the first enabled tab.

Outputs

Output	Payload	Description
(changed)	TabsChangeDetail	The user selected a different tab. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
panel(id: string): HTMLDivElement | null | undefined	The tabpanel for a tab id, for consumers to fill.
select(id: string): void	Select programmatically (no events).

Test harness

AuiTabsHarness from @absoluteui/angular/testing. <aui-tabs>.