Tabs

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

Uncontrolled mode for easy implementation

Full keyboard navigation

Architecture

so-tabs
Slot: trigger-list
so-tabs-trigger-button
Slot: default
Slot: content
so-tabs-content
Slot: default

Reference

  • Tabs

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

    • Attributes

      • default-value
        string
        /
        default: -

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

    • Events

      • onValueChange

        Event handler called when the active tab changes.

  • Trigger 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.

  • 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

      • 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.

  • Moves focus to the next trigger and activates its associated content.

  • Moves focus to the previous trigger and activates its associated content.

  • Home

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

  • End

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

made for toddle