shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Spinner
Animated Icon Spinner Input Group for React
A disabled input with a spinning loader at its start and a Please wait note at its end.
Framework
UI library
A field that's busy: the input is disabled, a loader icon spins at its start and Please wait... sits at its end, so people know the value is being refreshed. Swap the spinner out when the data arrives.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
What makes the icon spin?
animate-spin on the LoaderIcon. For a ready-made one, use the Spinner component, as in Loading States.
How is the field disabled?
disabled on InputGroupInput blocks typing. data-disabled="true" on InputGroup dims the addons.
Why is the loader at the start?
Its addon keeps the default inline-start align. Both addons are written after the input.
Related
- Loading States Input GroupTwo disabled inputs, one with a spinner
- Spinner with Text Input GroupA disabled input with Saving
- Textarea Loading Input GroupA disabled textarea with a spinner under
- Multiple Icons Input GroupA password and an API key input with two
- Character Counter Input Group (Text)A tweet input with a 280-character limit
- Button with Text (Standard)The one filled action