Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Spinner with Text Input Group for Solid

A disabled field with the words Saving... and a spinner sitting together at the end of the input.

UI library: Ark UI

The input is disabled, and the placeholder says Saving changes.... At the end, Saving... sits just before a spinner. The demo never turns that spinner off.

Use the words when a spinner alone would not say what is happening. A wait on the submit button is a Spinner in that button. In Solid, Ark UI does not clear Saving... when the save finishes.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background" data-disabled="true">
    <InputGroupInput aria-label="Changes" disabled placeholder="Saving changes..." type="text" />
    <InputGroupAddon align="inline-end">
      <InputGroupText>Saving...</InputGroupText>
      <Spinner />
    </InputGroupAddon>
  </InputGroup>

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.

API Reference

Input Group

Sets data-disabled, aria-label="Changes", disabled, placeholder="Saving changes...", type="text" and align="inline-end". The rest is on the Input Group page.

Spinner

No extra props in this demo. The rest is on the Spinner page.

All 39 input group examples