Tab Group

<afp-tab-group>

Since 1.0.0

stable

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

A tab group component to organize related content. Can switch between labeled tabs to reveal associated panels.

Overview

Settings

Advanced New

Disabled

This is the overview panel where basic information is displayed.

This panel contains customizable settings for your configuration.

Advanced options and developer-level settings appear here.

This tab is disabled and cannot be selected.

<afp-tab-group>
  <afp-tab slot="nav" panel="overview" active>Overview</afp-tab>
  <afp-tab slot="nav" panel="settings">Settings</afp-tab>
  <afp-tab slot="nav" panel="advanced">Advanced <afp-badge appearance="filled" variant="brand" slot="actions">New</afp-badge></afp-tab>
  <afp-tab slot="nav" panel="disabled" disabled>Disabled</afp-tab>

  <afp-tab-panel name="overview">
    This is the overview panel where basic information is displayed.
  </afp-tab-panel>

  <afp-tab-panel name="settings">
    This panel contains customizable settings for your configuration.
  </afp-tab-panel>

  <afp-tab-panel name="advanced">
    Advanced options and developer-level settings appear here.
  </afp-tab-panel>

  <afp-tab-panel name="disabled">
    This tab is disabled and cannot be selected.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group>
  <afp-tab [slot]="'nav'" [panel]="'overview'" active>Overview</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'settings'">Settings</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'advanced'">Advanced <afp-badge [appearance]="'filled'" [variant]="'brand'" [slot]="'actions'">New</afp-badge></afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'disabled'" disabled>Disabled</afp-tab>

  <afp-tab-panel [name]="'overview'">
    This is the overview panel where basic information is displayed.
  </afp-tab-panel>

  <afp-tab-panel [name]="'settings'">
    This panel contains customizable settings for your configuration.
  </afp-tab-panel>

  <afp-tab-panel [name]="'advanced'">
    Advanced options and developer-level settings appear here.
  </afp-tab-panel>

  <afp-tab-panel [name]="'disabled'">
    This tab is disabled and cannot be selected.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup>
  <AfpTab slot="nav" panel="overview" active>Overview</AfpTab>
  <AfpTab slot="nav" panel="settings">Settings</AfpTab>
  <AfpTab slot="nav" panel="advanced">Advanced <AfpBadge appearance="filled" variant="brand" slot="actions">New</AfpBadge></AfpTab>
  <AfpTab slot="nav" panel="disabled" disabled>Disabled</AfpTab>

  <AfpTabPanel name="overview">
    This is the overview panel where basic information is displayed.
  </AfpTabPanel>

  <AfpTabPanel name="settings">
    This panel contains customizable settings for your configuration.
  </AfpTabPanel>

  <AfpTabPanel name="advanced">
    Advanced options and developer-level settings appear here.
  </AfpTabPanel>

  <AfpTabPanel name="disabled">
    This tab is disabled and cannot be selected.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup>
  <AfpTab :slot="'nav'" :panel="'overview'" active>Overview</AfpTab>
  <AfpTab :slot="'nav'" :panel="'settings'">Settings</AfpTab>
  <AfpTab :slot="'nav'" :panel="'advanced'">Advanced <AfpBadge :appearance="'filled'" :variant="'brand'" :slot="'actions'">New</AfpBadge></AfpTab>
  <AfpTab :slot="'nav'" :panel="'disabled'" disabled>Disabled</AfpTab>

  <AfpTabPanel :name="'overview'">
    This is the overview panel where basic information is displayed.
  </AfpTabPanel>

  <AfpTabPanel :name="'settings'">
    This panel contains customizable settings for your configuration.
  </AfpTabPanel>

  <AfpTabPanel :name="'advanced'">
    Advanced options and developer-level settings appear here.
  </AfpTabPanel>

  <AfpTabPanel :name="'disabled'">
    This tab is disabled and cannot be selected.
  </AfpTabPanel>
</AfpTabGroup>

Examples #

Placements #

Use the placement attribute to change the placement of the tabs.

Bottom #

Use placement="bottom" to position the tabs below the tab panels.

Profile

Preferences

Security

Billing

Manage your personal information and avatar settings here.

Configure language, theme, and notification options.

Update your password, MFA options, and security logs.

View invoices, payment methods, and subscription details.

<afp-tab-group placement="bottom">
  <afp-tab slot="nav" panel="profile" active>Profile</afp-tab>
  <afp-tab slot="nav" panel="preferences">Preferences</afp-tab>
  <afp-tab slot="nav" panel="security">Security</afp-tab>
  <afp-tab slot="nav" panel="billing">Billing</afp-tab>

  <afp-tab-panel name="profile">
    Manage your personal information and avatar settings here.
  </afp-tab-panel>

  <afp-tab-panel name="preferences">
    Configure language, theme, and notification options.
  </afp-tab-panel>

  <afp-tab-panel name="security">
    Update your password, MFA options, and security logs.
  </afp-tab-panel>

  <afp-tab-panel name="billing">
    View invoices, payment methods, and subscription details.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group [placement]="'bottom'">
  <afp-tab [slot]="'nav'" [panel]="'profile'" active>Profile</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'preferences'">Preferences</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'security'">Security</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'billing'">Billing</afp-tab>

  <afp-tab-panel [name]="'profile'">
    Manage your personal information and avatar settings here.
  </afp-tab-panel>

  <afp-tab-panel [name]="'preferences'">
    Configure language, theme, and notification options.
  </afp-tab-panel>

  <afp-tab-panel [name]="'security'">
    Update your password, MFA options, and security logs.
  </afp-tab-panel>

  <afp-tab-panel [name]="'billing'">
    View invoices, payment methods, and subscription details.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup placement="bottom">
  <AfpTab slot="nav" panel="profile" active>Profile</AfpTab>
  <AfpTab slot="nav" panel="preferences">Preferences</AfpTab>
  <AfpTab slot="nav" panel="security">Security</AfpTab>
  <AfpTab slot="nav" panel="billing">Billing</AfpTab>

  <AfpTabPanel name="profile">
    Manage your personal information and avatar settings here.
  </AfpTabPanel>

  <AfpTabPanel name="preferences">
    Configure language, theme, and notification options.
  </AfpTabPanel>

  <AfpTabPanel name="security">
    Update your password, MFA options, and security logs.
  </AfpTabPanel>

  <AfpTabPanel name="billing">
    View invoices, payment methods, and subscription details.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup :placement="'bottom'">
  <AfpTab :slot="'nav'" :panel="'profile'" active>Profile</AfpTab>
  <AfpTab :slot="'nav'" :panel="'preferences'">Preferences</AfpTab>
  <AfpTab :slot="'nav'" :panel="'security'">Security</AfpTab>
  <AfpTab :slot="'nav'" :panel="'billing'">Billing</AfpTab>

  <AfpTabPanel :name="'profile'">
    Manage your personal information and avatar settings here.
  </AfpTabPanel>

  <AfpTabPanel :name="'preferences'">
    Configure language, theme, and notification options.
  </AfpTabPanel>

  <AfpTabPanel :name="'security'">
    Update your password, MFA options, and security logs.
  </AfpTabPanel>

  <AfpTabPanel :name="'billing'">
    View invoices, payment methods, and subscription details.
  </AfpTabPanel>
</AfpTabGroup>

Left #

Use placement="left" to position the tabs to the left of the tab panels.

Overview

Datasets

Import

Export

A summary of available data and recent activity.

Browse and manage all datasets in the system.

Upload new data files or connect external sources.

Download datasets in various formats.

<afp-tab-group placement="left">
  <afp-tab slot="nav" panel="overview" active>Overview</afp-tab>
  <afp-tab slot="nav" panel="datasets">Datasets</afp-tab>
  <afp-tab slot="nav" panel="import">Import</afp-tab>
  <afp-tab slot="nav" panel="export">Export</afp-tab>

  <afp-tab-panel name="overview">
    A summary of available data and recent activity.
  </afp-tab-panel>

  <afp-tab-panel name="datasets">
    Browse and manage all datasets in the system.
  </afp-tab-panel>

  <afp-tab-panel name="import">
    Upload new data files or connect external sources.
  </afp-tab-panel>

  <afp-tab-panel name="export">
    Download datasets in various formats.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group [placement]="'left'">
  <afp-tab [slot]="'nav'" [panel]="'overview'" active>Overview</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'datasets'">Datasets</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'import'">Import</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'export'">Export</afp-tab>

  <afp-tab-panel [name]="'overview'">
    A summary of available data and recent activity.
  </afp-tab-panel>

  <afp-tab-panel [name]="'datasets'">
    Browse and manage all datasets in the system.
  </afp-tab-panel>

  <afp-tab-panel [name]="'import'">
    Upload new data files or connect external sources.
  </afp-tab-panel>

  <afp-tab-panel [name]="'export'">
    Download datasets in various formats.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup placement="left">
  <AfpTab slot="nav" panel="overview" active>Overview</AfpTab>
  <AfpTab slot="nav" panel="datasets">Datasets</AfpTab>
  <AfpTab slot="nav" panel="import">Import</AfpTab>
  <AfpTab slot="nav" panel="export">Export</AfpTab>

  <AfpTabPanel name="overview">
    A summary of available data and recent activity.
  </AfpTabPanel>

  <AfpTabPanel name="datasets">
    Browse and manage all datasets in the system.
  </AfpTabPanel>

  <AfpTabPanel name="import">
    Upload new data files or connect external sources.
  </AfpTabPanel>

  <AfpTabPanel name="export">
    Download datasets in various formats.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup :placement="'left'">
  <AfpTab :slot="'nav'" :panel="'overview'" active>Overview</AfpTab>
  <AfpTab :slot="'nav'" :panel="'datasets'">Datasets</AfpTab>
  <AfpTab :slot="'nav'" :panel="'import'">Import</AfpTab>
  <AfpTab :slot="'nav'" :panel="'export'">Export</AfpTab>

  <AfpTabPanel :name="'overview'">
    A summary of available data and recent activity.
  </AfpTabPanel>

  <AfpTabPanel :name="'datasets'">
    Browse and manage all datasets in the system.
  </AfpTabPanel>

  <AfpTabPanel :name="'import'">
    Upload new data files or connect external sources.
  </AfpTabPanel>

  <AfpTabPanel :name="'export'">
    Download datasets in various formats.
  </AfpTabPanel>
</AfpTabGroup>

Right #

Use placement="right" to position the tabs to the right of the tab panels.

Appearance

Behavior

Events

Accessibility

Change colors, spacing, and typography settings.

Configure interaction rules, animations, and state logic.

Manage event callbacks and custom handlers.

Adjust ARIA labels and keyboard navigation options.

<afp-tab-group placement="right">
  <afp-tab slot="nav" panel="appearance" active>Appearance</afp-tab>
  <afp-tab slot="nav" panel="behavior">Behavior</afp-tab>
  <afp-tab slot="nav" panel="events">Events</afp-tab>
  <afp-tab slot="nav" panel="accessibility">Accessibility</afp-tab>

  <afp-tab-panel name="appearance">
    Change colors, spacing, and typography settings.
  </afp-tab-panel>

  <afp-tab-panel name="behavior">
    Configure interaction rules, animations, and state logic.
  </afp-tab-panel>

  <afp-tab-panel name="events">
    Manage event callbacks and custom handlers.
  </afp-tab-panel>

  <afp-tab-panel name="accessibility">
    Adjust ARIA labels and keyboard navigation options.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group [placement]="'right'">
  <afp-tab [slot]="'nav'" [panel]="'appearance'" active>Appearance</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'behavior'">Behavior</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'events'">Events</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'accessibility'">Accessibility</afp-tab>

  <afp-tab-panel [name]="'appearance'">
    Change colors, spacing, and typography settings.
  </afp-tab-panel>

  <afp-tab-panel [name]="'behavior'">
    Configure interaction rules, animations, and state logic.
  </afp-tab-panel>

  <afp-tab-panel [name]="'events'">
    Manage event callbacks and custom handlers.
  </afp-tab-panel>

  <afp-tab-panel [name]="'accessibility'">
    Adjust ARIA labels and keyboard navigation options.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup placement="right">
  <AfpTab slot="nav" panel="appearance" active>Appearance</AfpTab>
  <AfpTab slot="nav" panel="behavior">Behavior</AfpTab>
  <AfpTab slot="nav" panel="events">Events</AfpTab>
  <AfpTab slot="nav" panel="accessibility">Accessibility</AfpTab>

  <AfpTabPanel name="appearance">
    Change colors, spacing, and typography settings.
  </AfpTabPanel>

  <AfpTabPanel name="behavior">
    Configure interaction rules, animations, and state logic.
  </AfpTabPanel>

  <AfpTabPanel name="events">
    Manage event callbacks and custom handlers.
  </AfpTabPanel>

  <AfpTabPanel name="accessibility">
    Adjust ARIA labels and keyboard navigation options.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup :placement="'right'">
  <AfpTab :slot="'nav'" :panel="'appearance'" active>Appearance</AfpTab>
  <AfpTab :slot="'nav'" :panel="'behavior'">Behavior</AfpTab>
  <AfpTab :slot="'nav'" :panel="'events'">Events</AfpTab>
  <AfpTab :slot="'nav'" :panel="'accessibility'">Accessibility</AfpTab>

  <AfpTabPanel :name="'appearance'">
    Change colors, spacing, and typography settings.
  </AfpTabPanel>

  <AfpTabPanel :name="'behavior'">
    Configure interaction rules, animations, and state logic.
  </AfpTabPanel>

  <AfpTabPanel :name="'events'">
    Manage event callbacks and custom handlers.
  </AfpTabPanel>

  <AfpTabPanel :name="'accessibility'">
    Adjust ARIA labels and keyboard navigation options.
  </AfpTabPanel>
</AfpTabGroup>

Scroll controls #

Use the noScrollControls attribute to disable the arrows that appear when there is not enough space. The overflow will only be reachable with keyboard inputs.

With scroll controls #

Automatic scroll controls will appear when there are more tabs than can fit in the available space.

Overview

General

Appearance

Notifications

Privacy

Security

Billing

Integrations

API

Automation

Logs

Support

A quick summary of your application settings and recent changes.

Configure basic app settings, language preferences, and metadata.

Customize themes, typography, and layout options.

Manage email, push, and in-app notification preferences.

Control data sharing, tracking options, and permissions.

Set up authentication, MFA, sessions, and access policies.

View invoices, subscriptions, and payment details.

Connect external services and manage integration settings.

Manage API keys, rate limits, and developer documentation.

Configure workflows, rules, and scheduled tasks.

Access system logs, audit trails, and error reports.

Contact support, view help articles, or request assistance.

<afp-tab-group>
  <afp-tab slot="nav" panel="overview" active>Overview</afp-tab>
  <afp-tab slot="nav" panel="general">General</afp-tab>
  <afp-tab slot="nav" panel="appearance">Appearance</afp-tab>
  <afp-tab slot="nav" panel="notifications">Notifications</afp-tab>
  <afp-tab slot="nav" panel="privacy">Privacy</afp-tab>
  <afp-tab slot="nav" panel="security">Security</afp-tab>
  <afp-tab slot="nav" panel="billing">Billing</afp-tab>
  <afp-tab slot="nav" panel="integrations">Integrations</afp-tab>
  <afp-tab slot="nav" panel="api">API</afp-tab>
  <afp-tab slot="nav" panel="automation">Automation</afp-tab>
  <afp-tab slot="nav" panel="logs">Logs</afp-tab>
  <afp-tab slot="nav" panel="support">Support</afp-tab>

  <afp-tab-panel name="overview">
    A quick summary of your application settings and recent changes.
  </afp-tab-panel>

  <afp-tab-panel name="general">
    Configure basic app settings, language preferences, and metadata.
  </afp-tab-panel>

  <afp-tab-panel name="appearance">
    Customize themes, typography, and layout options.
  </afp-tab-panel>

  <afp-tab-panel name="notifications">
    Manage email, push, and in-app notification preferences.
  </afp-tab-panel>

  <afp-tab-panel name="privacy">
    Control data sharing, tracking options, and permissions.
  </afp-tab-panel>

  <afp-tab-panel name="security">
    Set up authentication, MFA, sessions, and access policies.
  </afp-tab-panel>

  <afp-tab-panel name="billing">
    View invoices, subscriptions, and payment details.
  </afp-tab-panel>

  <afp-tab-panel name="integrations">
    Connect external services and manage integration settings.
  </afp-tab-panel>

  <afp-tab-panel name="api">
    Manage API keys, rate limits, and developer documentation.
  </afp-tab-panel>

  <afp-tab-panel name="automation">
    Configure workflows, rules, and scheduled tasks.
  </afp-tab-panel>

  <afp-tab-panel name="logs">
    Access system logs, audit trails, and error reports.
  </afp-tab-panel>

  <afp-tab-panel name="support">
    Contact support, view help articles, or request assistance.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group>
  <afp-tab [slot]="'nav'" [panel]="'overview'" active>Overview</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'general'">General</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'appearance'">Appearance</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'notifications'">Notifications</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'privacy'">Privacy</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'security'">Security</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'billing'">Billing</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'integrations'">Integrations</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'api'">API</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'automation'">Automation</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'logs'">Logs</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'support'">Support</afp-tab>

  <afp-tab-panel [name]="'overview'">
    A quick summary of your application settings and recent changes.
  </afp-tab-panel>

  <afp-tab-panel [name]="'general'">
    Configure basic app settings, language preferences, and metadata.
  </afp-tab-panel>

  <afp-tab-panel [name]="'appearance'">
    Customize themes, typography, and layout options.
  </afp-tab-panel>

  <afp-tab-panel [name]="'notifications'">
    Manage email, push, and in-app notification preferences.
  </afp-tab-panel>

  <afp-tab-panel [name]="'privacy'">
    Control data sharing, tracking options, and permissions.
  </afp-tab-panel>

  <afp-tab-panel [name]="'security'">
    Set up authentication, MFA, sessions, and access policies.
  </afp-tab-panel>

  <afp-tab-panel [name]="'billing'">
    View invoices, subscriptions, and payment details.
  </afp-tab-panel>

  <afp-tab-panel [name]="'integrations'">
    Connect external services and manage integration settings.
  </afp-tab-panel>

  <afp-tab-panel [name]="'api'">
    Manage API keys, rate limits, and developer documentation.
  </afp-tab-panel>

  <afp-tab-panel [name]="'automation'">
    Configure workflows, rules, and scheduled tasks.
  </afp-tab-panel>

  <afp-tab-panel [name]="'logs'">
    Access system logs, audit trails, and error reports.
  </afp-tab-panel>

  <afp-tab-panel [name]="'support'">
    Contact support, view help articles, or request assistance.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup>
  <AfpTab slot="nav" panel="overview" active>Overview</AfpTab>
  <AfpTab slot="nav" panel="general">General</AfpTab>
  <AfpTab slot="nav" panel="appearance">Appearance</AfpTab>
  <AfpTab slot="nav" panel="notifications">Notifications</AfpTab>
  <AfpTab slot="nav" panel="privacy">Privacy</AfpTab>
  <AfpTab slot="nav" panel="security">Security</AfpTab>
  <AfpTab slot="nav" panel="billing">Billing</AfpTab>
  <AfpTab slot="nav" panel="integrations">Integrations</AfpTab>
  <AfpTab slot="nav" panel="api">API</AfpTab>
  <AfpTab slot="nav" panel="automation">Automation</AfpTab>
  <AfpTab slot="nav" panel="logs">Logs</AfpTab>
  <AfpTab slot="nav" panel="support">Support</AfpTab>

  <AfpTabPanel name="overview">
    A quick summary of your application settings and recent changes.
  </AfpTabPanel>

  <AfpTabPanel name="general">
    Configure basic app settings, language preferences, and metadata.
  </AfpTabPanel>

  <AfpTabPanel name="appearance">
    Customize themes, typography, and layout options.
  </AfpTabPanel>

  <AfpTabPanel name="notifications">
    Manage email, push, and in-app notification preferences.
  </AfpTabPanel>

  <AfpTabPanel name="privacy">
    Control data sharing, tracking options, and permissions.
  </AfpTabPanel>

  <AfpTabPanel name="security">
    Set up authentication, MFA, sessions, and access policies.
  </AfpTabPanel>

  <AfpTabPanel name="billing">
    View invoices, subscriptions, and payment details.
  </AfpTabPanel>

  <AfpTabPanel name="integrations">
    Connect external services and manage integration settings.
  </AfpTabPanel>

  <AfpTabPanel name="api">
    Manage API keys, rate limits, and developer documentation.
  </AfpTabPanel>

  <AfpTabPanel name="automation">
    Configure workflows, rules, and scheduled tasks.
  </AfpTabPanel>

  <AfpTabPanel name="logs">
    Access system logs, audit trails, and error reports.
  </AfpTabPanel>

  <AfpTabPanel name="support">
    Contact support, view help articles, or request assistance.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup>
  <AfpTab :slot="'nav'" :panel="'overview'" active>Overview</AfpTab>
  <AfpTab :slot="'nav'" :panel="'general'">General</AfpTab>
  <AfpTab :slot="'nav'" :panel="'appearance'">Appearance</AfpTab>
  <AfpTab :slot="'nav'" :panel="'notifications'">Notifications</AfpTab>
  <AfpTab :slot="'nav'" :panel="'privacy'">Privacy</AfpTab>
  <AfpTab :slot="'nav'" :panel="'security'">Security</AfpTab>
  <AfpTab :slot="'nav'" :panel="'billing'">Billing</AfpTab>
  <AfpTab :slot="'nav'" :panel="'integrations'">Integrations</AfpTab>
  <AfpTab :slot="'nav'" :panel="'api'">API</AfpTab>
  <AfpTab :slot="'nav'" :panel="'automation'">Automation</AfpTab>
  <AfpTab :slot="'nav'" :panel="'logs'">Logs</AfpTab>
  <AfpTab :slot="'nav'" :panel="'support'">Support</AfpTab>

  <AfpTabPanel :name="'overview'">
    A quick summary of your application settings and recent changes.
  </AfpTabPanel>

  <AfpTabPanel :name="'general'">
    Configure basic app settings, language preferences, and metadata.
  </AfpTabPanel>

  <AfpTabPanel :name="'appearance'">
    Customize themes, typography, and layout options.
  </AfpTabPanel>

  <AfpTabPanel :name="'notifications'">
    Manage email, push, and in-app notification preferences.
  </AfpTabPanel>

  <AfpTabPanel :name="'privacy'">
    Control data sharing, tracking options, and permissions.
  </AfpTabPanel>

  <AfpTabPanel :name="'security'">
    Set up authentication, MFA, sessions, and access policies.
  </AfpTabPanel>

  <AfpTabPanel :name="'billing'">
    View invoices, subscriptions, and payment details.
  </AfpTabPanel>

  <AfpTabPanel :name="'integrations'">
    Connect external services and manage integration settings.
  </AfpTabPanel>

  <AfpTabPanel :name="'api'">
    Manage API keys, rate limits, and developer documentation.
  </AfpTabPanel>

  <AfpTabPanel :name="'automation'">
    Configure workflows, rules, and scheduled tasks.
  </AfpTabPanel>

  <AfpTabPanel :name="'logs'">
    Access system logs, audit trails, and error reports.
  </AfpTabPanel>

  <AfpTabPanel :name="'support'">
    Contact support, view help articles, or request assistance.
  </AfpTabPanel>
</AfpTabGroup>

Without scroll controls #

Use the noScrollControls (noscrollcontrols) attribute to disable the scroll controls.

Overview

General

Appearance

Notifications

Privacy

Security

Billing

Integrations

API

Automation

Logs

Support

A quick summary of your application settings and recent changes.

Configure basic app settings, language preferences, and metadata.

Customize themes, typography, and layout options.

Manage email, push, and in-app notification preferences.

Control data sharing, tracking options, and permissions.

Set up authentication, MFA, sessions, and access policies.

View invoices, subscriptions, and payment details.

Connect external services and manage integration settings.

Manage API keys, rate limits, and developer documentation.

Configure workflows, rules, and scheduled tasks.

Access system logs, audit trails, and error reports.

Contact support, view help articles, or request assistance.

<afp-tab-group noscrollcontrols>
  <afp-tab slot="nav" panel="overview" active>Overview</afp-tab>
  <afp-tab slot="nav" panel="general">General</afp-tab>
  <afp-tab slot="nav" panel="appearance">Appearance</afp-tab>
  <afp-tab slot="nav" panel="notifications">Notifications</afp-tab>
  <afp-tab slot="nav" panel="privacy">Privacy</afp-tab>
  <afp-tab slot="nav" panel="security">Security</afp-tab>
  <afp-tab slot="nav" panel="billing">Billing</afp-tab>
  <afp-tab slot="nav" panel="integrations">Integrations</afp-tab>
  <afp-tab slot="nav" panel="api">API</afp-tab>
  <afp-tab slot="nav" panel="automation">Automation</afp-tab>
  <afp-tab slot="nav" panel="logs">Logs</afp-tab>
  <afp-tab slot="nav" panel="support">Support</afp-tab>

  <afp-tab-panel name="overview">
    A quick summary of your application settings and recent changes.
  </afp-tab-panel>

  <afp-tab-panel name="general">
    Configure basic app settings, language preferences, and metadata.
  </afp-tab-panel>

  <afp-tab-panel name="appearance">
    Customize themes, typography, and layout options.
  </afp-tab-panel>

  <afp-tab-panel name="notifications">
    Manage email, push, and in-app notification preferences.
  </afp-tab-panel>

  <afp-tab-panel name="privacy">
    Control data sharing, tracking options, and permissions.
  </afp-tab-panel>

  <afp-tab-panel name="security">
    Set up authentication, MFA, sessions, and access policies.
  </afp-tab-panel>

  <afp-tab-panel name="billing">
    View invoices, subscriptions, and payment details.
  </afp-tab-panel>

  <afp-tab-panel name="integrations">
    Connect external services and manage integration settings.
  </afp-tab-panel>

  <afp-tab-panel name="api">
    Manage API keys, rate limits, and developer documentation.
  </afp-tab-panel>

  <afp-tab-panel name="automation">
    Configure workflows, rules, and scheduled tasks.
  </afp-tab-panel>

  <afp-tab-panel name="logs">
    Access system logs, audit trails, and error reports.
  </afp-tab-panel>

  <afp-tab-panel name="support">
    Contact support, view help articles, or request assistance.
  </afp-tab-panel>
</afp-tab-group>

<afp-tab-group noscrollcontrols>
  <afp-tab [slot]="'nav'" [panel]="'overview'" active>Overview</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'general'">General</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'appearance'">Appearance</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'notifications'">Notifications</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'privacy'">Privacy</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'security'">Security</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'billing'">Billing</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'integrations'">Integrations</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'api'">API</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'automation'">Automation</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'logs'">Logs</afp-tab>
  <afp-tab [slot]="'nav'" [panel]="'support'">Support</afp-tab>

  <afp-tab-panel [name]="'overview'">
    A quick summary of your application settings and recent changes.
  </afp-tab-panel>

  <afp-tab-panel [name]="'general'">
    Configure basic app settings, language preferences, and metadata.
  </afp-tab-panel>

  <afp-tab-panel [name]="'appearance'">
    Customize themes, typography, and layout options.
  </afp-tab-panel>

  <afp-tab-panel [name]="'notifications'">
    Manage email, push, and in-app notification preferences.
  </afp-tab-panel>

  <afp-tab-panel [name]="'privacy'">
    Control data sharing, tracking options, and permissions.
  </afp-tab-panel>

  <afp-tab-panel [name]="'security'">
    Set up authentication, MFA, sessions, and access policies.
  </afp-tab-panel>

  <afp-tab-panel [name]="'billing'">
    View invoices, subscriptions, and payment details.
  </afp-tab-panel>

  <afp-tab-panel [name]="'integrations'">
    Connect external services and manage integration settings.
  </afp-tab-panel>

  <afp-tab-panel [name]="'api'">
    Manage API keys, rate limits, and developer documentation.
  </afp-tab-panel>

  <afp-tab-panel [name]="'automation'">
    Configure workflows, rules, and scheduled tasks.
  </afp-tab-panel>

  <afp-tab-panel [name]="'logs'">
    Access system logs, audit trails, and error reports.
  </afp-tab-panel>

  <afp-tab-panel [name]="'support'">
    Contact support, view help articles, or request assistance.
  </afp-tab-panel>
</afp-tab-group>

<AfpTabGroup noscrollcontrols>
  <AfpTab slot="nav" panel="overview" active>Overview</AfpTab>
  <AfpTab slot="nav" panel="general">General</AfpTab>
  <AfpTab slot="nav" panel="appearance">Appearance</AfpTab>
  <AfpTab slot="nav" panel="notifications">Notifications</AfpTab>
  <AfpTab slot="nav" panel="privacy">Privacy</AfpTab>
  <AfpTab slot="nav" panel="security">Security</AfpTab>
  <AfpTab slot="nav" panel="billing">Billing</AfpTab>
  <AfpTab slot="nav" panel="integrations">Integrations</AfpTab>
  <AfpTab slot="nav" panel="api">API</AfpTab>
  <AfpTab slot="nav" panel="automation">Automation</AfpTab>
  <AfpTab slot="nav" panel="logs">Logs</AfpTab>
  <AfpTab slot="nav" panel="support">Support</AfpTab>

  <AfpTabPanel name="overview">
    A quick summary of your application settings and recent changes.
  </AfpTabPanel>

  <AfpTabPanel name="general">
    Configure basic app settings, language preferences, and metadata.
  </AfpTabPanel>

  <AfpTabPanel name="appearance">
    Customize themes, typography, and layout options.
  </AfpTabPanel>

  <AfpTabPanel name="notifications">
    Manage email, push, and in-app notification preferences.
  </AfpTabPanel>

  <AfpTabPanel name="privacy">
    Control data sharing, tracking options, and permissions.
  </AfpTabPanel>

  <AfpTabPanel name="security">
    Set up authentication, MFA, sessions, and access policies.
  </AfpTabPanel>

  <AfpTabPanel name="billing">
    View invoices, subscriptions, and payment details.
  </AfpTabPanel>

  <AfpTabPanel name="integrations">
    Connect external services and manage integration settings.
  </AfpTabPanel>

  <AfpTabPanel name="api">
    Manage API keys, rate limits, and developer documentation.
  </AfpTabPanel>

  <AfpTabPanel name="automation">
    Configure workflows, rules, and scheduled tasks.
  </AfpTabPanel>

  <AfpTabPanel name="logs">
    Access system logs, audit trails, and error reports.
  </AfpTabPanel>

  <AfpTabPanel name="support">
    Contact support, view help articles, or request assistance.
  </AfpTabPanel>
</AfpTabGroup>

<AfpTabGroup noscrollcontrols>
  <AfpTab :slot="'nav'" :panel="'overview'" active>Overview</AfpTab>
  <AfpTab :slot="'nav'" :panel="'general'">General</AfpTab>
  <AfpTab :slot="'nav'" :panel="'appearance'">Appearance</AfpTab>
  <AfpTab :slot="'nav'" :panel="'notifications'">Notifications</AfpTab>
  <AfpTab :slot="'nav'" :panel="'privacy'">Privacy</AfpTab>
  <AfpTab :slot="'nav'" :panel="'security'">Security</AfpTab>
  <AfpTab :slot="'nav'" :panel="'billing'">Billing</AfpTab>
  <AfpTab :slot="'nav'" :panel="'integrations'">Integrations</AfpTab>
  <AfpTab :slot="'nav'" :panel="'api'">API</AfpTab>
  <AfpTab :slot="'nav'" :panel="'automation'">Automation</AfpTab>
  <AfpTab :slot="'nav'" :panel="'logs'">Logs</AfpTab>
  <AfpTab :slot="'nav'" :panel="'support'">Support</AfpTab>

  <AfpTabPanel :name="'overview'">
    A quick summary of your application settings and recent changes.
  </AfpTabPanel>

  <AfpTabPanel :name="'general'">
    Configure basic app settings, language preferences, and metadata.
  </AfpTabPanel>

  <AfpTabPanel :name="'appearance'">
    Customize themes, typography, and layout options.
  </AfpTabPanel>

  <AfpTabPanel :name="'notifications'">
    Manage email, push, and in-app notification preferences.
  </AfpTabPanel>

  <AfpTabPanel :name="'privacy'">
    Control data sharing, tracking options, and permissions.
  </AfpTabPanel>

  <AfpTabPanel :name="'security'">
    Set up authentication, MFA, sessions, and access policies.
  </AfpTabPanel>

  <AfpTabPanel :name="'billing'">
    View invoices, subscriptions, and payment details.
  </AfpTabPanel>

  <AfpTabPanel :name="'integrations'">
    Connect external services and manage integration settings.
  </AfpTabPanel>

  <AfpTabPanel :name="'api'">
    Manage API keys, rate limits, and developer documentation.
  </AfpTabPanel>

  <AfpTabPanel :name="'automation'">
    Configure workflows, rules, and scheduled tasks.
  </AfpTabPanel>

  <AfpTabPanel :name="'logs'">
    Access system logs, audit trails, and error reports.
  </AfpTabPanel>

  <AfpTabPanel :name="'support'">
    Contact support, view help articles, or request assistance.
  </AfpTabPanel>
</AfpTabGroup>

Properties

Learn more about properties.

Name Description Reflects

placement

The placement of the tabs.

Type

TabGroupPlacement

Name	Description
`LEFT`	Left placement of the tab group.
`RIGHT`	Right placement of the tab group.
`TOP`	Top placement of the tab group.
`BOTTOM`	Bottom placement of the tab group.

TabGroupPlacement

Default TabGroupPlacement.TOP

noScrollControls
noscrollcontrols

Disables the scroll arrows that appear when tabs overflow.

Type boolean

Default false

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Activates and displays the tab associated with the specified panel. This method finds the tab that corresponds to the provided panel identifier and sets it as the active tab. If a matching tab is found, it becomes the active tab, and its content is displayed. Return `void`	`panel<string>` — The identifier of the panel to be shown, which is associated with a tab.

Events

Learn more about events.

Name	Return	Description
`afp-hide`	`string`	Emitted when a tab is hidden.
`afp-show`	`string`	Emitted when a tab is shown.

Slots

Learn more about slots.

Name	Description
`nav`	Slot for adding custom content into the tab navigation
`default`	Default slot for adding tab panel content into the tab group bod

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The container for the tab group	`::part(base)`
`container`	The container for the navigation area	`::part(container)`
`nav`	The navigation area of the tab group	`::part(nav)`
`tabs`	The container for the tabs(list)	`::part(tabs)`
`active-tab-indicator`	The indicator that shows the active tab	`::part(active-tab-indicator)`
`indicator`	The indicator that shows the active tab	`::part(indicator)`
`scroll-button-left`	The left scroll button	`::part(scroll-button-left)`
`scroll-button-right`	The right scroll button	`::part(scroll-button-right)`
`body`	The container for the tab content	`::part(body)`

CSS Custom Properties

Name	Description	Default
`--afp-tab-group-active-track-color`	The color of the active tab indicator	`--afp-color-link`
`--afp-tab-group-control-size`	The size of the tab group scroll controls	`--afp-font-size-m`
`--afp-tab-group-border-width`	The border width of the tab group	`--afp-border-width-m`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

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-group/tab-group.js';