Fieldbook
Sign in

Navigation

Sliding Panel Tabs

Two tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump.

Using Sliding Panel Tabs

Two tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accentColor, defaultTab

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Keyboard pill tabs
1986Keyboard pill tabsNavigationA two-tab switcher with a pill highlight that glides between labels and full roving-focus keyboard navigation between tabs.
Segmented Choice Switch
2422Segmented Choice SwitchNavigationA rounded pill switcher where exactly one option is active and a sliding highlight glides beneath whichever choice is picked.
Sliding highlight tabs
2043Sliding highlight tabsNavigationAn accessible tab list where a rounded highlight block glides beneath the active label as selection moves between tabs, revealing a matching content panel below.
Sliding segment tabs
2235Sliding segment tabsNavigationA pill-shaped segmented control whose background indicator glides beneath the active label while the panel below slides in from the direction of travel.
Two-Mode Resize Tabs
2072Two-Mode Resize TabsNavigationA tab bar with a morphing pill highlight whose content frame can either grow to fit each panel's natural height or resize as one animated box, chosen by a mode switch.
ARIA Tablist Resize
1914ARIA Tablist ResizeNavigationA fully accessible roving-tabindex tab list with a gliding pill highlight, where the panel frame smoothly resizes to whichever tab's content is showing.