Tabs

Compare

Compare similar concepts

Platform equivalents

The same interaction can have a different name or contract on each platform. Check the mapping before choosing an API.

• HTML

  No direct primitive

  No direct primitive

  HTML has no tabs element; buttons, panels, state, focus movement, and hiding behavior must be composed.

  Verified 2026-09-03

• WAI-ARIA APG

  Direct

  tablist + tab + tabpanel roles

  WAI-ARIA APG 2026-09

  The pattern defines role relationships, one tab stop, arrow navigation, selection, and panel visibility.

  Verified 2026-09-03Official documentation

• Radix UI

  Direct

  Tabs.Root

  @radix-ui/react-tabs 1.1.x

  The primitive coordinates the tab list, triggers, panels, keyboard orientation, activation, and state.

  Verified 2026-09-03Official documentation

• shadcn/ui

  Direct

  Tabs

  shadcn/ui docs 2026-09-03

  The Tabs recipe exposes the Radix tabs behavior with local styling.

  Verified 2026-09-03Official documentation

• Material UI

  Direct

  Tabs + Tab

  Material UI v9.4.0

  Tabs manages selection and indicators; the application associates and renders each tab panel.

  Verified 2026-09-03Official documentation

• SwiftUI

  Direct

  TabView

  SwiftUI documentation 2026-09

  TabView switches among selected child views and adapts its tab presentation to the platform.

  Verified 2026-09-03Official documentation

• Jetpack Compose

  Direct

  Tab + PrimaryTabRow

  Android Developers 2026-08

  Tab rows present related destinations while application state selects and renders the matching content.

  Verified 2026-09-03Official documentation

• Flutter

  Direct

  TabBar + TabBarView

  Flutter API docs 2026-09

  TabBar and TabBarView share a controller to synchronize selection, keyboard or gesture navigation, and panels.

  Verified 2026-09-03Official documentation

Impact profile

Measured implementation costs and operating constraints for this SkillCodex specimen. A missing evaluation is never treated as free.

Rendering

Client

Lazy weight

11.4 kB-gzip

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Sum of gzip -9 bytes for the lazy files of module 26189 in .next/server/app/(en)/term/[slug]/page/react-loadable-manifest.json after pnpm build:local at c9f1299.

Low-end devices

Fine

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Loaded the 390 x 844 term route in isolated Chromium with 6x CPU throttling and reduced motion, then exercised the first state change; failures are recorded as non-blocking warnings.

CPU / GPU

Radix and React switch peer DOM panels; no canvas, WebGL or continuous animation path is present.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Static source inspection of the target lab module plus an interaction on the isolated Chromium verification route; checked DOM/React work and absence of canvas or WebGL.

Reduced motion

The global reduced-motion contract collapses animation and transition durations; the same states and controls remain available.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Inspected src/app/globals.css prefers-reduced-motion rules and repeated the target interaction with reducedMotion=reduce in Chromium.

Static fallback

Without JavaScript, the term route stays on its localized Loading fallback; the profile and initial specimen are not revealed.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Loaded all ten prerendered routes from a local next start build in Chromium with JavaScript disabled; each HTTP 200 remained on the localized Loading fallback, so the profile and specimen were not revealed.

Server rendering

Hydrates

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Inspected the prerendered route response, then loaded the same route with JavaScript enabled and exercised the hydrated client specimen.

Maintenance

Stable

Dependencies

• @radix-ui/react-tabs 1.1.21

Verification checklist

1. 1Every tab controls exactly one panel
2. 2Only one peer panel is presented at a time
3. 3Arrow and activation behavior is documented
4. 4Slow panels use manual activation

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

# Implement Tabs in your agent

## Objective
Implement Tabs for this verified behavior: A set of labels that switches between related content panels while keeping one panel visible at a time.

## Prerequisites
- Inspect the repository, design system, and existing tests first.
- Preserve unrelated changes and keep the file scope bounded.
- Confirm that Tabs matches the need before writing code.

## Required behavior
- The selected tab exposes its associated panel while the other panels are hidden.
- Arrow keys move through related items according to their visual orientation.

## States to cover
- Overview tab selected
- Files tab selected

## Accessibility
- ARIA role: tablist > tab + tabpanel
- The primary control or named region for Tabs has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
- The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
- Not applicable: selecting another tab replaces the visible panel without closing the component.
- Selected state and the relationship between each tab and its named panel are exposed.
- Tab enters the selected tab
- Arrow keys move between tabs
- Enter or Space activates in manual mode
- Home and End reach the first and last tab

## When not to use
- Users need to compare panels simultaneously
- Each destination deserves its own URL and page navigation

## Acceptance criteria
- Every tab controls exactly one panel
- Only one peer panel is presented at a time
- Arrow and activation behavior is documented
- Slow panels use manual activation

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Verify Tabs after implementation

## Objective
Audit the Tabs implementation against its behavior, states, and accessibility requirements without changing it automatically.

## Checks
- Replay the smallest representative journey.
- Check keyboard behavior, focus, accessible name, and announcements.
- Tie each gap to a specific acceptance criterion.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Debug Tabs in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Reproduce the issue with the smallest relevant journey.
- Compare behavior with the documented states and transitions for Tabs.
- Verify keyboard behavior, focus, accessible name, and announcements.

## Possible causes
- The chosen primitive does not match the expected behavior.
- A state, transition, or focus return is missing.
- A neighboring component captures an event or hides an accessible signal.

## Bounded corrections
- Fix the reproduced cause without recreating neighboring components.
- Preserve the public contract and add a focused regression test.
- Do not install dependencies or change remote state without authorization.

## Final verification
- Every tab controls exactly one panel
- Only one peer panel is presented at a time
- Arrow and activation behavior is documented
- Slow panels use manual activation

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Prevent the Tabs regression

## Objective
Turn the reproduced cause into a focused regression test and compare Tabs with neighboring concepts before widening the fix.

## Checks
- Prove that the test fails before the fix.
- Prove that it passes after the bounded fix.
- Verify that no neighboring component changed behavior.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Pack digest: sha256:388f7679bff18368c7b1d995f565b7f9ccf0bf6101781a4be0f598e330d08269

In code