Components

Tabs

Tab-based content switching for related information panels and settings. Toolbar buttons are auto-generated from each .tabs-toggle label unless you provide explicit .tabs-toolbar markup.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Basic tabs

Toolbar and panel sync are initialised automatically from .wckd-tabs columns. In auto mode, each toolbar label mirrors the matching .tabs-toggle button text.

Launch summary and key outcomes.

Authentication, endpoints, and examples.

Connector setup, webhooks, and deployment notes.

Markup

<div class="wckd-tabs columns count-1 accordion background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Overview</button>
    <div class="tabs-content pad">Overview content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">API</button>
    <div class="tabs-content pad">API content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Integrations</button>
    <div class="tabs-content pad">Integration content</div>
  </div>
</div>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Vertical tabs

Useful for dense docs and app-like settings navigation. Vertical mode still auto-generates toolbar labels from each .tabs-toggle.

Name, bio, and avatar settings.

Password and 2FA setup.

Markup

<div class="wckd-tabs columns count-1 accordion vertical background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Profile</button>
    <div class="tabs-content pad">Profile settings</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Security</button>
    <div class="tabs-content pad">Security settings</div>
  </div>
</div>

Accordion behaviour on narrow screens

Add accordion to allow stacked toggle behaviour when viewport width is constrained.

Overview content.

Specs content.

Markup

<div class="wckd-tabs columns count-1 accordion background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Overview</button>
    <div class="tabs-content pad">Overview content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Specs</button>
    <div class="tabs-content pad">Specs content</div>
  </div>
</div>

Explicit toolbar markup

Provide a .tabs-toolbar before .wckd-tabs when you need exact tab button ordering or different toolbar labels than the panel toggle text.

Summary panel content.

API panel content.

Markup

<div class="tabs-toolbar" aria-label="Sample toolbar">
  <button class="tabs-toggle" type="button">Summary</button>
  <button class="tabs-toggle" type="button">API</button>
</div>
<div class="wckd-tabs columns count-1 background-color">
  <div class="column active"><button class="tabs-toggle" type="button">Summary</button><div class="tabs-content pad">Summary panel</div></div>
  <div class="column"><button class="tabs-toggle" type="button">API</button><div class="tabs-content pad">API panel</div></div>
</div>

When to use

  • Use tabs to reduce page length while keeping related content in one region.
  • Use vertical tabs for denser information architecture and longer labels.
  • Use toolbar-backed tabs when users frequently switch between adjacent topics.

Implementation notes

  • Toolbar behaviour: if no .tabs-toolbar exists before .wckd-tabs, JavaScript creates one automatically.
  • Auto-labelling behaviour: each generated toolbar button label comes from the matching .column > .tabs-toggle text.
  • Use explicit .tabs-toolbar markup when you need custom toolbar labels, custom order, or marketing-friendly naming.
  • Use buttons for tab controls unless tabs need direct-link URL behaviour.
  • Keep panel count in sync with tab count to avoid state mismatch.
  • Mark a single default active tab and panel on initial render.

Developer checklist

  • Choose one labelling mode: auto toolbar labels from .tabs-toggle text, or explicit .tabs-toolbar labels you author directly.
  • If you provide explicit .tabs-toolbar, keep its button count and order aligned with .wckd-tabs columns.
  • Use aria-label on .tabs-toolbar or .wckd-tabs when tab context is not obvious from nearby headings.
  • Use .wckd-tabs with direct .column children containing .tabs-toggle and .tabs-content.
  • Set exactly one .column.active in initial markup.
  • Keep toggle count and panel count aligned to avoid sync mismatches.

← All components