Tab

<afp-tab>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A tab component to select and reveal a specific panel within a tab group.

Tab

<afp-tab>Tab</afp-tab>

<afp-tab>Tab</afp-tab>

<AfpTab>Tab</AfpTab>

<AfpTab>Tab</AfpTab>

Use the Tab Panel component to create tab panels associated with <afp-tab> elements.

Examples #

Active #

Use the active attribute to indicate the currently active tab.

Active Tab

<afp-tab active>Active Tab</afp-tab>

<afp-tab active>Active Tab</afp-tab>

<AfpTab active>Active Tab</AfpTab>

<AfpTab active>Active Tab</AfpTab>

Actions #

You can add icons, badges, or other elements to the tab using the actions slot.

Closeable Tab

New Tab New

<div class="afp-stack">
  <afp-tab>
    Closeable Tab
    <afp-icon name="x-lg" slot="actions"></afp-icon>
  </afp-tab>
  <afp-tab>
    New Tab
    <afp-badge appearance="filled" variant="brand" slot="actions">New</afp-badge>
  </afp-tab>
</div>

<div class="afp-stack">
  <afp-tab>
    Closeable Tab
    <afp-icon [name]="'x-lg'" [slot]="'actions'"></afp-icon>
  </afp-tab>
  <afp-tab>
    New Tab
    <afp-badge [appearance]="'filled'" [variant]="'brand'" [slot]="'actions'">New</afp-badge>
  </afp-tab>
</div>

<div class="afp-stack">
  <AfpTab>
    Closeable Tab
    <AfpIcon name="x-lg" slot="actions"></AfpIcon>
  </AfpTab>
  <AfpTab>
    New Tab
    <AfpBadge appearance="filled" variant="brand" slot="actions">New</AfpBadge>
  </AfpTab>
</div>

<div class="afp-stack">
  <AfpTab>
    Closeable Tab
    <AfpIcon :name="'x-lg'" :slot="'actions'"></AfpIcon>
  </AfpTab>
  <AfpTab>
    New Tab
    <AfpBadge :appearance="'filled'" :variant="'brand'" :slot="'actions'">New</AfpBadge>
  </AfpTab>
</div>

Disabled #

Use the disabled attribute to disable a tab.

Disabled Tab

<afp-tab disabled>Disabled Tab</afp-tab>

<afp-tab disabled>Disabled Tab</afp-tab>

<AfpTab disabled>Disabled Tab</AfpTab>

<AfpTab disabled>Disabled Tab</AfpTab>

Properties

Learn more about properties.

Name	Description	Reflects
`panel`	The name of the tab panel the tab will control. The panel must be located in the same tab group. Type `string`
`disabled`	Set to true to draw the tab in a disabled state. Type `boolean` Default `false`
`active`	Set to true to display this tab. Type `boolean` Default `false`

Methods

Learn more about using methods.

Name	Description	Arguments
`setFocus`	Sets focus on the tab element. This method programmatically sets focus on the associated tab element. You can optionally provide custom focus options to control the behavior of the focus action (e.g., whether it should scroll into view).	`options<FocusOptions>` — Optional settings to customize the behavior of the focus action (e.g., `preventScroll`).

Slots

Learn more about slots.

Name	Description
`default`	Slot for adding custom content inside the tab
`actions`	Slot for adding action elements inside the tab

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The container for the tab when it is in the default state	`::part(base)`
`base-active`	The container for the tab when it is active	`::part(base-active)`
`base-disabled`	The container for the tab when it is disabled	`::part(base-disabled)`
`content`	The inner content of the tab	`::part(content)`
`value`	The value container inside the tab content	`::part(value)`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/tab/tab.js';