Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Spinner

Loading States Input Group for React

Two disabled inputs, one with a spinner at its end and one at its start.

Framework
UI library

Show work in progress inside the field it affects. Both inputs are disabled while busy; the first shows a Spinner at its end, the second at its start. Pick the side by where people look: the end for search, the start for a status.

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 I put the spinner at the start or the end?

With align on its InputGroupAddon: inline-end for the first field, the default inline-start for the second. Both addons come after the input.

What is the Spinner?

A spinning loader icon with aria-label="Loading" by default, sized size-4.

How are the fields disabled?

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

How do I show the spinner only while loading?

Render the addon only while your request is pending, and drop disabled when it settles.

How are the inputs set up?

Searching is type="search" and Processing is type="text", each with an aria-label since there's no visible label.

How are the two fields laid out?

A column with gap-4, capped at max-w-sm.

All 39 input group examples