Tab

<ahi-tab> | AhiTab

Tabs are used inside tab groups to represent and activate tab panels.

Additional demonstrations can be found in the tab group examples.

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/tab/tab.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/tab/tab.js';

Name	Description
(default)	The tab’s label.

Learn more about using slots.

Name	Description	Type	Default
`slot`	The slot the tab is assigned to. Defaults to `nav` so tabs are automatically placed in the tab group’s navigation without having to set `slot="nav"` manually.	`string`	`'nav'`
`panel`	The name of the tab panel this tab is associated with. The panel must be located in the same tab group.	`string`	`''`
`active`	Draws the tab in an active state.	`boolean`	`false`
`closable`	Makes the tab closable and shows a close button.	`boolean`	`false`
`disabled`	Disables the tab and prevents selection.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Name	Description	Event Detail
`ahi-close`	Emitted when the tab is closable and the close affordance is activated, either by clicking it or by pressing Delete or Backspace while the tab has focus.	-

Learn more about events.

Name	Description	Arguments
`handleClosableChange()`	Advertises the keyboard path to closing, which is otherwise undiscoverable. The close affordance is a decorative span hidden from assistive technology, so nothing in the accessibility tree would otherwise hint that this tab can be closed at all. `aria-keyshortcuts` is the attribute for exactly this and, unlike the `aria-describedby` first sketched on CORE-785, it needs no IDREF — an IDREF cannot cross a shadow boundary, and `role="tab"` is on the host while any hint text this component rendered would live in its shadow root, so a description could never have resolved. Backspace is handled too but is not listed: it is the same key under a different name on Apple keyboards, and naming both reads as two shortcuts.	-
`requestClose()`	Emits `ahi-close`, exactly as pressing the close button does. The close button is deliberately outside the tab order — a `role="tab"` must not contain focusable descendants (WCAG 4.1.2, and axe’s `nested-interactive`) — so `ahi-tab-group` calls this when Delete or Backspace is pressed on a focused closable tab. That keyboard path is what keeps closing reachable without a pointer; see CORE-782.	-

Learn more about methods.

Name	Description
`base`	Deprecated. Use the `tab` part instead.
`tab`	The component’s outer wrapper.
`close-button`	The close affordance. A decorative `<span>`, not a button — see below.

This component automatically imports the following dependencies.