Tabs

Tabs

Component preview

A set of labels that switches between related content panels while keeping one panel visible at a time.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: tabbed interface, tab bar, panel tabs

switch between overview and activity panels
labels across the top that change content
show one related view at a time
a row of tabs above a panel
change sections without leaving the page
keyboard arrows between content views

Try it

Change view or reveal content

Compare all three behaviors

Shared comparison scenario: A project workspace reveals related content in place while preserving the user's position on the page.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Tabs

Tabs control content panels; Segmented control chooses one value, while Accordion reveals sections vertically without replacing one shared panel.

Your task

Move from Overview to Files with arrow keys and verify the matching panel and focus behavior.

Edge case to verify

If a panel needs noticeable loading time, activation becomes manual so arrow navigation does not trigger repeated waits.

Mission

Move from Overview to Files with arrow keys and verify the matching panel and focus behavior.

Primary state: One selected tab names the visible panel, and the other panels are hidden from interaction.

Overview

Project summary and upcoming deadlines.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Tab list

The named set that groups the available tabs.

Use it when

Grouping a few peer views in one workspace
Switching instantly between related settings sections

Avoid it when

Users need to compare panels simultaneously
Each destination deserves its own URL and page navigation

Compare similar concepts

Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.

Segmented control

Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.

Accordion

Technical details

Behaviors

Activate a panel
The selected tab exposes its associated panel while the other panels are hidden.
Navigate with arrows
Arrow keys move through related items according to their visual orientation.

States

Overview tab selected
Overview tab selected
Files tab selected
Files tab selected

State transitions

Overview tab selected → Files tab selected
Arrow navigation reaches Files and automatic or explicit activation reveals its panel.
Files tab selected → Overview tab selected
Arrow navigation reaches Overview and automatic or explicit activation reveals its panel.

Test scenarios

Context: A project page groups Overview, Activity, and Files in one fast local workspace.
Mission: Move from Overview to Files with arrow keys and verify the matching panel and focus behavior.
Primary state: One selected tab names the visible panel, and the other panels are hidden from interaction.
Edge case: If a panel needs noticeable loading time, activation becomes manual so arrow navigation does not trigger repeated waits.

Accessibility

Role: tablist with tab and tabpanel
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
Dismissal: Not applicable: selecting another tab replaces the visible panel without closing the component.
Scroll: Changing the active view preserves a stable page position. Focus remains on the controlling item and newly revealed content does not cause an unexpected jump.
Announcement: Selected state and the relationship between each tab and its named panel are exposed.
Keyboard: 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

Bindings

Tabs.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
tabs
radixPrimitive
Tabs
shadcnRecipe
Tabs
runtimeDependency
@radix-ui/react-tabs@1.1.17
packageName
@radix-ui/react-tabs
exportName
Tabs.Root
exactVersion
1.1.17
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: The application must choose manual or automatic activation according to panel latency and test the matching keyboard behavior.
Verify binding source

Sources

WAI-ARIA APG: Tabs Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Tabs: tab, tablist, and tabpanel relationships plus activation and keyboard guidance.
Radix Primitives: Tabs
Radix Primitives · documentation · 2026-07-16
Claim covered: Tabs: documented Radix Tabs parts, controlled value, activation mode, and keyboard behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.