Skip to content

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

Free

Loading States Input Group for Ark UI

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

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 React, Ark UI does not know when the request has finished.

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

Anatomy

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

Usage

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background" data-disabled="true">
    <InputGroupInput
      aria-label="Search"
      disabled
      placeholder="Searching..."
      type="search"
    />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background" data-disabled="true">
    <InputGroupInput
      aria-label="Request"
      disabled
      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