Tabs - Seventh UI VanillaJS

Playground

This example uses automatic activation. Arrow keys move focus and selection together.

Overview

The selected tab and panel are synchronized by the vanilla runtime.

Activity

Arrow keys skip disabled tabs and keep focus inside the tablist.

Settings

Before-change events can cancel selection before DOM state changes.

Disabled

This panel stays unreachable while the tab is disabled.

Manual Activation

Use data-sui-activation="manual" when arrows should move focus without selecting until Enter or Space.

Manual tab one.

Manual tab two.

Manual tab three.

Hooks

Tabs can use ARIA roles, data hooks, or both.

Hook	Role
`data-sui-tabs`	Tabs root initialized by the component registry.
`role="tablist"` or `data-sui-tabs-list`	Container for tab controls.
`role="tab"` or `data-sui-tab`	Selectable tab control with roving tabindex.
`role="tabpanel"` or `data-sui-tab-panel`	Panel synchronized with the selected tab.
`aria-controls` or `data-sui-target`	Relationship from tab to panel.

Events

sui:tabs:before-change is cancellable.

sui:tabs:before-change
sui:tabs:change

Markup

<section class="sui-tabs" data-sui-tabs>
  <div class="sui-tabs__list" role="tablist">
    <button class="sui-tabs__tab" data-sui-tab data-sui-target="panel-a">
      Overview
    </button>
  </div>
  <div class="sui-tabs__panel" id="panel-a" data-sui-tab-panel>
    Panel content
  </div>
</section>