made for Nordcraft

Tabs

A component that organizes content into multiple sections, displaying one section at a time. Implements the ARIA tabs pattern for proper accessibility support.

  • Can be controlled or uncontrolled

  • Supports horizontal/vertical orientation

  • Supports automatic/manual activation

  • Full keyboard navigation

Example

Architecture

zcore-tabs-root
Slot: default
zcore-tabs-list
Slot: default
zcore-tabs-trigger
Slot: default You need to place an zcore-button here.
zcore-button
zcore-tabs-indicator
zcore-tabs-content
Slot: default

Reference

  • Root

    The root container that manages the state and behavior of the tabs system. Coordinates the interaction between triggers, content panels, and the optional indicator.

    • Attributes

      • default-value
        string
        /
        default: -

        The initial active tab when rendered. Use when you do not need to control the active tab state.

      • direction
        enum
        /
        default: ltr

        The reading direction of the tabs. Affects the keyboard navigation and visual presentation.

      • manual-mode
        boolean
        /
        default: false

        When true, tab panels are only activated by clicking the tab trigger. When false, tab panels activate automatically when their triggers receive focus.

      • orientation
        enum
        /
        default: horizontal

        The orientation of the tab list. Affects keyboard navigation and visual layout of the tabs.

      • scroll-behavior
        enum
        /
        default: none

        Defines how the tab list scrolls when a tab is highlighted, which is currently out of view.

      • value
        string
        /
        default: -

        The controlled active tab value. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the active tab changes.

    • Classes

      • direction-rtl

        Applied when the reading direction is right-to-left.

      • orientation-vertical

        Applied when the tab list orientation is vertical.

  • List

    The container for tab triggers that provides proper keyboard navigation and ARIA attributes. Manages focus behavior and keyboard interactions between tabs.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the tab list when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the tabs list.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

      • loop
        boolean
        /
        default: true

        When true, keyboard navigation will loop from last tab to first and vice versa.

    • Classes

      • orientation-vertical

        Applied when the tab list orientation is vertical.

  • Trigger

    A wrapper component that must contain an zcore-button. The button controls the visibility of its associated tab panel and automatically receives the appropriate ARIA attributes.

    • Attributes

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the tab.

      • value
        string
        /
        default: -

        A unique value that associates this trigger with its corresponding content panel.

  • Indicator

    An optional visual element that highlights the currently selected tab. By default, it automatically positions and sizes itself to match the active tab trigger.

    • Content

      The container that holds the content for a specific tab panel. Content is shown when its corresponding trigger is active and automatically receives proper ARIA attributes.

      • Attributes

        • id
          string
          /
          default: -

          ID that is forwarded to the underlying container for DOM manipulation.

        • value
          string
          /
          default: -

          A unique value that associates this content with its corresponding trigger. Content is displayed when this value matches the active tab value.

    Keyboard

    • Tab

      When focus enters the tab list, focuses the active trigger. When a trigger is focused, moves focus to the active content panel.

    • When vertical, moves focus to the next trigger and activates its associated content unless manual-mode is enabled.

    • When vertical, moves focus to the previous trigger and activates its associated content unless manual-mode is enabled.

    • When horizontal, moves focus to the next trigger in ltr or the previous trigger in rtl, and activates its associated content unless manual-mode is enabled.

    • When horizontal, moves focus to the previous trigger in ltr or the next trigger in rtl, and activates its associated content unless manual-mode is enabled.

    • Home

      Moves focus to the first trigger and activates its associated content.

    • End

      Moves focus to the last trigger and activates its associated content.