Skip to content

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

Free

Loading States Input Group for Vue

Two disabled fields: a search with a spinner at the end, and a request with a spinner at the start.

UI library: Ark UI

Both inputs are disabled. The search field says Searching... and shows a spinner at the end. The request field says Processing... and shows a spinner at the start. Neither spinner leaves on its own.

Show the spinner inside the field that is busy. If the whole page is waiting, use a Spinner beside the content. In Vue, Ark UI does not know when the request has finished.

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

<div class="flex w-full max-w-sm flex-col gap-4">
  <InputGroup class="bg-background" data-disabled="true">
    <InputGroupInput
      aria-label="Search"
      :disabled="true"
      placeholder="Searching..."
      type="search"
    />
    <InputGroupAddon align="inline-end"><Spinner /></InputGroupAddon>
  </InputGroup>
  <InputGroup class="bg-background" data-disabled="true">
    <InputGroupInput
      aria-label="Request"
      :disabled="true"
      placeholder="Processing..."
      type="text"
    />
    <InputGroupAddon><Spinner /></InputGroupAddon>
  </InputGroup>
</div>

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.

API Reference

Input Group

Sets data-disabled, aria-label="Search", disabled, placeholder="Searching...", type="search" 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