Tabs

Tabs allow users to organize related content into multiple sections that occupy the same space, with only one section visible at a time. 🗂️

Installation

You can install the Tabs component using the global design system bundle or as a standalone script.

Using the Bundle

<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>
<script>
  const { RoTabs } = RingoUI;
  customElements.define('ro-tabs', RoTabs);
</script>

Standalone

<script src="https://webcdn.ringover.com/app/download/design-system/lts/components/tabs.js"></script>
<script>
  customElements.define('ro-tabs', RoTabs.RoTabs);
</script>

Examples

Basic Tabs (Primary)

The default tab style uses an animated underline indicator. No variant class is required on .ro-tab-header.

Wrap labels in .ro-tab-item-label. The <ro-tabs> element handles switching logic and ARIA states.

<ro-tabs id="my-tabs">
  <div class="ro-tab-header">
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Account</span>
    </div>
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Settings</span>
    </div>
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Notifications</span>
    </div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">
      <h3 class="ro-heading ro-level-4">Account Details</h3>
      <p class="ro-text">Manage your account information here.</p>
    </div>
    <div class="ro-tab-panel">
      <h3 class="ro-heading ro-level-4">Settings</h3>
      <p class="ro-text">Update your preferences and privacy settings.</p>
    </div>
    <div class="ro-tab-panel">
      <h3 class="ro-heading ro-level-4">Notifications</h3>
      <p class="ro-text">View your recent alerts and messages.</p>
    </div>
  </div>
</ro-tabs>

Preview

Account

Settings

Notifications

Account Details

Manage your account information here.

Settings

Update your preferences and privacy settings.

Notifications

View your recent alerts and messages.

Secondary Variant

Add .ro-variant-secondary for a filled background with rounded active tabs and no underline.

<ro-tabs>
  <div class="ro-tab-header ro-variant-secondary">
    <div class="ro-tab-item">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-tab-item-label">Tab 1</span>
    </div>
    <div class="ro-tab-item">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-tab-item-label">Tab 2</span>
    </div>
    <div class="ro-tab-item">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-tab-item-label">Tab 3</span>
    </div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Content for tab 1</div>
    <div class="ro-tab-panel">Content for tab 2</div>
    <div class="ro-tab-panel">Content for tab 3</div>
  </div>
</ro-tabs>

Preview

Tab 1

Tab 2

Tab 3

Content for tab 1

Content for tab 2

Content for tab 3

Combine .ro-variant-secondary.ro-color-scheme-white for a bordered active state on light surfaces.

<ro-tabs>
  <div class="ro-tab-header ro-variant-secondary ro-color-scheme-white">
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Overview</span>
    </div>
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Details</span>
    </div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Overview content</div>
    <div class="ro-tab-panel">Details content</div>
  </div>
</ro-tabs>

Preview

Overview

Details

Overview content

Details content

Add .ro-dir-vertical on the header for a vertical secondary layout.

<ro-tabs>
  <div class="ro-tab-header ro-variant-secondary ro-dir-vertical">
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Section A</span>
    </div>
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Section B</span>
    </div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Section A content</div>
    <div class="ro-tab-panel">Section B content</div>
  </div>
</ro-tabs>

Preview

Section A

Section B

Section A content

Section B content

Tertiary Variant

Add .ro-variant-tertiary for pill-shaped tabs with a filled active state.

<ro-tabs>
  <div class="ro-tab-header ro-variant-tertiary">
    <div class="ro-tab-item">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-tab-item-label">Accent</span>
    </div>
    <div class="ro-tab-item">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-tab-item-label">Neutral</span>
    </div>
    <div class="ro-tab-item">
      <span class="ro-tab-item-label">Label only</span>
    </div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Content for tab 1</div>
    <div class="ro-tab-panel">Content for tab 2</div>
    <div class="ro-tab-panel">Content for tab 3</div>
  </div>
</ro-tabs>

Preview

Accent

Neutral

Label only

Content for tab 1

Content for tab 2

Content for tab 3

Sizing

Add .ro-size-sm to any tab header. .ro-size-lg applies to .ro-variant-tertiary only.

<ro-tabs>
  <div class="ro-tab-header ro-variant-secondary ro-size-sm">
    <div class="ro-tab-item"><span class="ro-tab-item-label">Small secondary</span></div>
    <div class="ro-tab-item"><span class="ro-tab-item-label">Tab 2</span></div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Content 1</div>
    <div class="ro-tab-panel">Content 2</div>
  </div>
</ro-tabs>

<ro-tabs>
  <div class="ro-tab-header ro-variant-tertiary ro-size-lg">
    <div class="ro-tab-item"><span class="ro-tab-item-label">Large tertiary</span></div>
    <div class="ro-tab-item"><span class="ro-tab-item-label">Tab 2</span></div>
  </div>
  <div class="ro-tab-content">
    <div class="ro-tab-panel">Content 1</div>
    <div class="ro-tab-panel">Content for tab 2</div>
  </div>
</ro-tabs>

Preview

Small secondary

Tab 2

Content 1

Content 2

Large tertiary

Tab 2

Content 1

Content 2

---

Deprecated Variants

The following class is not shipped in @ringover/styles:

• .ro-variant-underline — use the default primary style (no variant class) or .ro-variant-secondary / .ro-variant-tertiary.

Properties

<ro-tabs>

Class / element	Description
.ro-tab-header, .ro-tabs-list	Tab list container.
.ro-tab-item, .ro-tabs-trigger	Individual tab trigger.
.ro-tab-item-label	Label text inside a tab item.
.ro-tab-content, .ro-tabs-content	Panel container.
.ro-tab-panel	Individual content panel.
.selected, .active, [data-state="active"]	Active tab/panel states.

Header variants (on .ro-tab-header)

Class	Description
(none)	Primary — underline indicator (default).
.ro-variant-secondary	Filled background; rounded active tab.
.ro-variant-tertiary	Pill-shaped tabs.
.ro-color-scheme-white	With secondary — bordered active tab on light surfaces.
.ro-dir-vertical	With secondary — vertical tab list.
.ro-size-sm	Compact tab height (all variants).
.ro-size-lg	Larger tertiary tabs only.
.ro-variant-tertiary.ro-size-sm	Compact tertiary pills.

JavaScript & Events

You can listen for the tab-change event to perform actions when a new tab is selected.

Event Details

Event Name	Detail	Description
tab-change	{ groupId, index, tab, panel }	Fired when a tab is activated.

Example

const tabs = document.querySelector("#my-tabs");
tabs.addEventListener("tab-change", (event) => {
  const { index, groupId } = event.detail;
  console.log(`Switched to tab ${index} in group ${groupId}`);
});