Skip to content
Fieldbook
Menu
Sign in
EN

Components

Tab

Explore live previews, find your fit, and bring open components into your project with source code included.

Build from a recipeConnect your agentExplore page templates

22 of 22

Pill tabs
1537Pill tabsNavigation
ARIA Tablist Resize
1914ARIA Tablist ResizeNavigation
Auto height tabs
1916Auto height tabsNavigationA tab group whose content container smoothly resizes its height to fit each panel as you switch tabs, instead of jumping or leaving empty space.
Bare Sliding Tab Strip
1920Bare Sliding Tab StripNavigation
Card blur tabs
1928Card blur tabsNavigationTabs framed in a bordered card whose content briefly blurs and crossfades when you switch panels, with a sliding pill behind the active tab label.
Icon label tabs
1981Icon label tabsNavigation
Keyboard pill tabs
1986Keyboard pill tabsNavigation
Roving focus tabs
2026Roving focus tabsNavigation
Slide out tabs button
2040Slide out tabs buttonButtonsA download button with two dark caption tabs stacked behind it that slide out above and below on hover and pull halfway back when it is held.
Sliding highlight tabs
2043Sliding highlight tabsNavigation
Sliding Panel Tabs
2044Sliding Panel TabsNavigationTwo tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump.
Sliding segment toggle
2045Sliding segment toggleInputs
Sliding Selection Highlight
2046Sliding Selection HighlightNavigation
Syntax Tab Switcher
2063Syntax Tab SwitcherNavigation
Two-Mode Resize Tabs
2072Two-Mode Resize TabsNavigation
Underline tabs
2077Underline tabsNavigation
Morphing Pill Navbar
2194Morphing Pill NavbarNavigation
Morphing tab panel
2195Morphing tab panelNavigation
Sliding height tabs
2233Sliding height tabsNavigation
Sliding segment tabs
2235Sliding segment tabsNavigation
Vertical rail tabs
2263Vertical rail tabsNavigation
Panel Tab Switcher
2399Panel Tab SwitcherNavigationA rounded tab bar where a background indicator morphs to the active tab's exact size and position, revealing a distinct content panel beneath it.

Compare these components

Choose by behavior and layout, then check the available frameworks and access requirements on each component page.

Guidance

Open the full index

Tags

3D (16)Accordion (9)Action (9)Add (7)Administration (12)Agent (12)Alert (8)Ambient (39)Analytics (13)Animated (82)Arc (7)Area (12)Arrow (33)Authorization (11)Authentication (12)Avatar (13)Backdrop (18)Background (54)Badge (22)Band (8)Banner (9)Bar (22)Beam (11)Bevel (12)Billing (10)Blob (7)Bloom (10)Blur (15)Booking (9)Border (16)Bounce (6)Burst (7)Button (401)Calendar (32)Call to action (11)Canvas (89)Capsule (12)Caption (8)Card (42)Carousel (11)Chart (59)Checkbox (13)Checklist (7)Chevron (10)Chip (26)Circle (9)Click (7)Clip (9)Code (6)Collapse (11)Collapsible (6)Column (7)Commercial (10)Compact (8)Comparison (8)Confirm (24)Confirmation (7)Controlled state (18)Corner (13)Count (7)Counter (18)Crosshair (6)Call to action (28)Cursor (26)Curtain (7)Customer (13)Cycle (6)Dark (15)Dashboard (9)Data (13)Date picker (16)Date range (13)Delete (8)Depth (32)Destructive (9)Diagonal (13)Dialog (17)Direction (6)Disclosure (8)Dismiss (6)Donut chart (7)Dot (17)Download (10)Drag (21)Drawer (10)Drift (17)Dropdown (18)Edge (7)Elastic (8)Elevation (6)Entrance (14)Expand (23)Fade (9)Fan (6)Feedback (12)Field (8)Fill (46)Filter (14)Finance (10)Flat (6)Flip (10)Flood (14)Focus (19)Focus trap (6)Folder (7)Follow (11)Form (48)Form control (12)Frame (20)Gallery (15)Gesture (6)Ghost (7)Glitch (9)Glow (39)Glyph (9)Gradient (38)Grain (10)Grid (35)Group (8)Hairline (8)Halo (15)Hard shadow (6)Heading (8)Headline (19)Hero section (11)Highlight (22)Hint (12)Hold (6)Hover (251)Hover card (10)Icon (125)Icon button (24)Indicator (9)Input (20)Inset (11)Interactive (50)Invert (26)Key (11)Keyboard (20)Keyboard navigation (6)Keycap (10)Label (21)Label swap (9)Layered (9)Layout (18)Ledge (6)Legend (9)Letter (10)Lift (19)Light (22)Line (19)Link (11)Link preview (7)Liquid (7)List (13)Loader (9)Loading (27)Login (10)Loop (42)Marker (9)Marquee (8)Mask (9)Menu (23)Metal (10)Metric (15)Minimal (10)Modal (19)Monospace (12)Monthly (12)Morph (14)Moulded (6)Navigation (21)Nested (7)Noise (16)Notification (7)Number (11)Offset (7)Orbit (13)Outline (63)Overflow (7)Overlay (24)Page (19)Panel (37)Parallax (15)Particle (18)Pattern (9)Perspective (20)Photo (6)Pie chart (7)Pill (83)Plate (9)Playful (7)Pointer (65)Polar (8)Popover (17)Press (77)Pressed (6)Product (6)Profile (8)Progress (27)Pulse (17)Radar (9)Radial (8)Radio group (8)Relief (6)Reveal (80)Ribbon (6)Rim (8)Ring (35)Ripple (18)Roll (6)Rotate (21)Rotation (6)Row (15)Scale (20)Scroll (38)Search (8)Section (8)Segmented (7)Segmented control (12)Send (23)Sequence (8)Series (7)Settings (22)Shadow (28)Share (25)Sheen (14)Sheet (6)Shimmer (8)Sidebar (7)Sign in (11)Signal (8)Sign up (9)Skew (9)Slab (6)Slide (21)Slider (10)Sliding highlight (7)Social (6)Soft (6)Spin (15)Spinner (9)Split (9)Spotlight (7)Spring (63)Square (6)Stack (17)Stacked (7)Stagger (40)Star (9)Statistic (7)State (11)Status (21)Stripe (6)Stroke (7)Submenu (9)Submit (7)SVG (102)Swap (12)Sweep (40)Switch (16)Tab (22)Tactile (26)Text (40)Texture (11)Tile (28)Tilt (26)Toggle (65)Toggle group (10)Toolbar (25)Tooltip (37)Tracking (6)Trail (20)Transition (6)Translucent (9)Travel (6)Trend (10)Typewriter (9)Typing (8)Typography (18)Underline (10)Uppercase (14)Value (7)Verification (8)Viewport (6)Warp (6)Wave (20)Wipe (23)Wobble (6)Workflow (18)Workspace (36)