Skip to content

Infolist Tabs

Automatic animations for tab switching in Filament Infolists — crossfade + horizontal slide on content, gradient indicator on the active tab.

How It Works

Automatic — no configuration needed. All Infolist tabs in your panel get the animations.

Animations

Tab Indicator

  • Active tab shows a gradient underline (primary-500 to primary-400)
  • The indicator scales in with a smooth 200ms animation
  • Inactive tabs have muted color, hover shows primary tint

Tab Content

  • Content panels transition with a combined effect:
    • Opacity fade (0 to 1, 150ms)
    • Horizontal slide (8px to 0, 150ms)
  • Subtle and non-distracting

Accessibility

Both animations respect prefers-reduced-motion:

  • Indicator appears instantly without scale animation
  • Content appears instantly without slide — just immediate visibility

Notes

  • Automatic on all Infolist tabs
  • Works with both horizontal and vertical tab orientations
  • All 8 presets supported