Tabs — ARC UI

Components

Tabs

navigation

hybrid

<arc-tabs>

Overview

Guidelines

When to use

Use Tabs when content sections are closely related and users need to compare or switch between them frequently.
Keep tab labels short — one or two words — so the entire tab bar fits without scrolling.
Set a sensible default `selected` index (usually 0) so the component is never empty on first render.
Provide meaningful panel content for every tab; avoid empty or placeholder panels in production.
Use the disabled state for tabs that are temporarily unavailable rather than hiding them entirely.

When not to use

Do not use Tabs for sequential steps — use a Stepper component instead.
Avoid nesting Tabs inside Tabs; the double tab bar creates confusion for keyboard and screen-reader users.
Do not place critical actions (like a Save button) inside a non-default tab where users may never see them.
Avoid more than five or six tabs in a single group — consider a dropdown or sidebar navigation for larger sets.
Do not rely on tab order to imply a workflow; tabs should be independently meaningful.

Features

Arrow-key keyboard navigation between tabs (left/right for horizontal, up/down for vertical)
Automatic WAI-ARIA roles: tab, tablist, and tabpanel with proper aria-controls linking
Smooth crossfade transition when switching panels
Disabled tab support — individual tabs can be non-interactive while remaining visible
Programmatic selected index via the `selected` property
Roving tabindex so only the active tab participates in the page Tab order
Supports rich HTML content inside each panel, not just plain text

Preview

ARC UI is a framework-agnostic component library built on web standards. It ships as lightweight Lit-based web components with zero-config wrappers for every major framework.

Keyboard navigation with arrow keys, automatic ARIA tab/tabpanel roles, smooth crossfade transitions between panels, and lazy rendering for heavy content.

v2.4.0 — Added disabled tab support and improved focus-visible ring styling. v2.3.0 — Introduced smooth crossfade panel transitions.

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-tabs>
  <arc-tab label="Overview">
    ARC UI is a framework-agnostic component library built on web standards.
  </arc-tab>
  <arc-tab label="Features">
    Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
  </arc-tab>
  <arc-tab label="Changelog">
    v2.4.0 — Disabled tab support and improved focus-visible ring styling.
  </arc-tab>
</arc-tabs>

import { Tabs, Tab } from '@arclux/arc-ui-react';

<Tabs>
  <Tab label="Overview">
    ARC UI is a framework-agnostic component library built on web standards.
  </Tab>
  <Tab label="Features">
    Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
  </Tab>
  <Tab label="Changelog">
    v2.4.0 — Disabled tab support and improved focus-visible ring styling.
  </Tab>
</Tabs>

<script setup>
import { Tabs, Tab } from '@arclux/arc-ui-vue';
</script>

<template>
  <Tabs>
    <Tab label="Overview">
      ARC UI is a framework-agnostic component library built on web standards.
    </Tab>
    <Tab label="Features">
      Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
    </Tab>
    <Tab label="Changelog">
      v2.4.0 — Disabled tab support and improved focus-visible ring styling.
    </Tab>
  </Tabs>
</template>

<script>
  import { Tabs, Tab } from '@arclux/arc-ui-svelte';
</script>

<Tabs>
  <Tab label="Overview">
    ARC UI is a framework-agnostic component library built on web standards.
  </Tab>
  <Tab label="Features">
    Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
  </Tab>
  <Tab label="Changelog">
    v2.4.0 — Disabled tab support and improved focus-visible ring styling.
  </Tab>
</Tabs>

import { Component } from '@angular/core';
import { Tabs, Tab } from '@arclux/arc-ui-angular';

@Component({
  imports: [Tabs, Tab],
  template: `
    <arc-tabs>
      <arc-tab label="Overview">
        ARC UI is a framework-agnostic component library built on web standards.
      </arc-tab>
      <arc-tab label="Features">
        Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
      </arc-tab>
      <arc-tab label="Changelog">
        v2.4.0 — Disabled tab support and improved focus-visible ring styling.
      </arc-tab>
    </arc-tabs>
  `,
})
export class TabsDemoComponent {}

import { Tabs, Tab } from '@arclux/arc-ui-solid';

export default function TabsDemo() {
  return (
    <Tabs>
      <Tab label="Overview">
        ARC UI is a framework-agnostic component library built on web standards.
      </Tab>
      <Tab label="Features">
        Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
      </Tab>
      <Tab label="Changelog">
        v2.4.0 — Disabled tab support and improved focus-visible ring styling.
      </Tab>
    </Tabs>
  );
}

import { Tabs, Tab } from '@arclux/arc-ui-preact';

export default function TabsDemo() {
  return (
    <Tabs>
      <Tab label="Overview">
        ARC UI is a framework-agnostic component library built on web standards.
      </Tab>
      <Tab label="Features">
        Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
      </Tab>
      <Tab label="Changelog">
        v2.4.0 — Disabled tab support and improved focus-visible ring styling.
      </Tab>
    </Tabs>
  );
}

<arc-tabs>
  <arc-tab label="Overview">
    ARC UI is a framework-agnostic component library built on web standards.
  </arc-tab>
  <arc-tab label="Features">
    Keyboard navigation, ARIA roles, smooth transitions, and lazy rendering.
  </arc-tab>
  <arc-tab label="Changelog">
    v2.4.0 — Disabled tab support and improved focus-visible ring styling.
  </arc-tab>
</arc-tabs>

API

Prop	Type	Default	Description
`selected`	`number`	`0`	Zero-based index of the currently active tab. Changing this value programmatically switches the visible panel and updates ARIA attributes. Out-of-range values are clamped to the nearest valid index.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Aligns the tab list. Options: 'start', 'center', 'end'.
`variant`	`'underline' \| 'pills'`	`'underline'`	Visual style of the tabs. Options: 'underline', 'pills'.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the tab list. Use 'vertical' to place tabs in a sidebar column with the panel to the right. Arrow-key navigation automatically switches to up/down in vertical mode.

Events

Event	Description
`arc-change`	Fired when the active tab changes

Tab

<arc-tab>

An individual tab panel within a Tabs group. Each Tab renders a button in the tab bar and owns its associated content panel. Use this sub-component when you need fine-grained control over individual tab behavior, such as disabling a specific tab or attaching per-tab event listeners.

Prop	Type	Default	Description
`label`	`string`	—	Text displayed on the tab button. Keep labels concise — one or two words — to prevent the tab bar from overflowing.