Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - Animated Icon Spinner
A React input group with animated LoaderIcon using animate-spin class and Please wait text at different positions with shadcn/ui InputGroup
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Custom spinners need flexibility—this React input shows LoaderIcon from Lucide React with animate-spin Tailwind class at inline-start and Please wait InputGroupText at inline-end creating dual-position loading feedback. Built with shadcn/ui InputGroup, InputGroupInput, InputGroupAddon, and InputGroupText components featuring data-disabled attribute, disabled state, two separate addons for icon and text, text-muted-foreground styling. The icon-spinner input creates customizable loading—perfect for branded spinners, custom animations, specific icon choices, asymmetric layouts, or anywhere default Spinner component needs customization or alternative positioning.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading States
Default Spinner component usage
Spinner with Text
Spinner with text in same addon
Textarea Loading
Spinner with textarea
Multiple Icons
Multiple icon addons
Character Counter
Text at inline-end
Standard Button
Button loading states
Questions you might have
React Input Group - Spinner with Text
A React input group with Spinner and Saving text label at inline-end showing explicit loading message using shadcn/ui InputGroup components
React Input Group - Textarea Loading
A React input group with Spinner for textarea and input showing loading states at block-end and inline-end positions using shadcn/ui InputGroup