Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Spinner

Spinner with Text Input Group for React

A disabled input with Saving... and a spinner at its end.

Framework
UI library

Say what's happening, not just that something is: Saving... and a Spinner sit together at the end of a disabled field, in one inline-end addon.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the text and the spinner share the end?

Both are children of one InputGroupAddon with align="inline-end", which spaces them with a gap.

What styles the Saving... text?

InputGroupText, the muted text part of the group.

How is the field disabled?

disabled on InputGroupInput. data-disabled="true" on InputGroup dims the addons.

Is Saving... announced?

Only if it's in a live region. Wrap the status in an element with role="status" to announce it when it appears.

What should it show when saving finishes?

Swap the addon for a check icon or Saved, then remove it after a moment.

Why does the text come before the spinner?

Children of an addon keep their order: text, then spinner.

All 39 input group examples