Preview

Note: Tabs are set via the tabs JavaScript property. See usage below.

Usage

<cs-tabs></cs-tabs>

<script>
  const tabs = document.querySelector('cs-tabs');
  tabs.tabs = [
    { label: 'Overview', id: 'overview' },
    { label: 'Details', id: 'details' },
    { label: 'Settings', id: 'settings', disabled: true },
  ];
  tabs.activeTabId = 'overview';
</script>

Properties

active-tab-idstring default: tab.id

The id of the currently active tab.

• If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).
• If you explicitly set this property, you must set define an onChange handler to update the property when a tab header is clicked (that is, controlled behavior).

aria-labelstring default: null

Provides an aria-label to the tab container. Don't use ariaLabel and ariaLabelledby at the same time.

aria-labelledbystring default: null

Sets the aria-labelledby property on the tab container. If there's a visible label element that you can reference, use this instead of ariaLabel. Don't use ariaLabel and ariaLabelledby at the same time.

disable-content-paddingsboolean default: false

Determines whether the tab content has padding. If true, removes the default padding from the tab content area.

fit-heightboolean default: false

Enabling this property makes the tab content fit to the available height. If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.

i18n-stringsTabsProps.I18nStrings

An object containing all the necessary localized strings required by the component.

keyboard-activation-mode'automatic' | 'manual'

Determines how the active tab is switched when navigating using the keyboard. The options are:

• 'automatic' (default): the active tab is switched using the arrow keys.
• 'manual': a tab must be explicitly activated using the enter/space key. We recommend using 'automatic' in most situations to provide consistent and quick switching between tabs. Use 'manual' only if there is a specific need to introduce friction to the switching of tabs.

tabsReadonlyArray<TabsProps.Tab>required

Specifies the tabs to display. Each tab object has the following properties:

• id (string) - The tab identifier. This value needs to be passed to the Tabs component as activeTabId to select this tab.
• label (unknown) - Tab label shown in the UI.
• content (unknown) - (Optional) Tab content to render in the container.
• disabled (boolean) - (Optional) Specifies if this tab is disabled.
• disabledReason (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.
• dismissible (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
• dismissLabel (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.
• dismissDisabled (boolean) - (Optional) Determines whether the dismiss button is disabled.
• action (unknown) - (Optional) Action for the tab, rendered next to its corresponding label. Although it is technically possible to insert any content, our UX guidelines only allow you to add an icon button or icon button dropdown.
• onDismiss (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.
• href (string) - (Optional) You can use this parameter to change the default href of the internal tab anchor. The click event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL, ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab, if your application routing can handle such deep links. You can manually update routing on the current page using the activeTabHref property of the change event's detail.
• contentRenderStrategy (string) - (Optional) Determines when tab content is rendered:
  • 'active': (Default) Only render content when the tab is active.
  • 'eager': Always render tab content (hidden when the tab is not active).
  • 'lazy': Like 'eager', but content is only rendered after the tab is first activated.

variantTabsProps.Variant default: 'default'

The possible visual variants of tabs are the following:

• default - Use in any context.
• container - Use this variant to have the tabs displayed within a container header.
• stacked - Use this variant directly adjacent to other stacked containers (such as a container, table).

Slots

actions

Actions for the tabs header, displayed next to the list of tabs. Use this to add a button or button dropdown that performs actions on the entire tab list. We recommend a maximum of one interactive element to minimize the number of keyboard tab stops between the tab list and content.

Events

changeCustomEvent<TabsProps.ChangeDetail>

Called whenever the user selects a different tab. The event's detail contains the new activeTabId.