Skip to content
Holocron

Holo Tabs, Tab & Tab Panel

<holo-tabs> manages a tablist of <holo-tab> children (slotted via slot="tab") and a set of <holo-tab-panel> children. It provides roving-tabindex keyboard navigation (Arrow keys, Home, End) and, by default, automatically activates a tab as soon as it receives focus.

Live Previews

Section titled “Live Previews”

Default (automatic activation)

Section titled “Default (automatic activation)”
Manage your account details here.Manage your security settings here.Manage your billing details here.

Account

Security

Billing

<holo-tabs label="Settings" value="account">
  <holo-tab slot="tab" panel="account">Account</holo-tab>
  <holo-tab slot="tab" panel="security">Security</holo-tab>
  <holo-tab-panel name="account">Manage your account details here.</holo-tab-panel>
  <holo-tab-panel name="security">Manage your security settings here.</holo-tab-panel>
</holo-tabs>

Disabled tab

Section titled “Disabled tab”
Manage your account details here.Manage your security settings here.

Account

Security

<holo-tabs label="Settings" value="account">
  <holo-tab slot="tab" panel="account">Account</holo-tab>
  <holo-tab slot="tab" panel="security" disabled>Security</holo-tab>
  <holo-tab-panel name="account">Manage your account details here.</holo-tab-panel>
  <holo-tab-panel name="security">Manage your security settings here.</holo-tab-panel>
</holo-tabs>

API Reference

Section titled “API Reference”

holo-tabs Properties

Section titled “holo-tabs Properties”

| Property | Attribute | Description | Type | Default | | ------------ | ------------ | --------------------------------------------------------------------------------- | ------------------------- | ------------- | | label | label | The accessible label describing the tablist. | string | undefined | | value | value | The panel value of the currently selected tab. Defaults to the first enabled tab. | string | undefined | | activation | activation | “automatic” selects a tab on focus; “manual” requires Enter/Space to activate. | 'automatic' \| 'manual' | 'automatic' |

holo-tabs Events

Section titled “holo-tabs Events”

| Event | Description | Type | | --------------- | -------------------------------------- | ----------------------------------------------- | | holoTabChange | Emitted when the selected tab changes. | CustomEvent<{ value: string; index: number }> |

holo-tab Properties

Section titled “holo-tab Properties”

| Property | Attribute | Description | Type | Default | | ---------- | ---------- | --------------------------------------------------------------------- | --------- | ------- | | panel | panel | The value of the holo-tab-panel this tab controls. | string | — | | selected | selected | Whether this tab is selected (managed by the parent). | boolean | false | | disabled | disabled | If true, this tab is disabled and skipped during keyboard navigation. | boolean | false |

holo-tab-panel Properties

Section titled “holo-tab-panel Properties”

| Property | Attribute | Description | Type | Default | | -------- | --------- | ----------------------------------------------------------- | --------- | ------- | | name | name | The value matching the holo-tab that controls this panel. | string | — | | active | active | Whether this panel is visible (managed by the parent). | boolean | false |