Skip to content

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

Free

Textarea Loading Input Group for Ark UI

A disabled textarea with a spinner under it, and a disabled file field with a spinner at its end.

Two busy controls. The textarea is disabled, says Generating content..., and has a spinner in a bordered row under the text. The file field is disabled, says Uploading file..., and has a spinner at the end.

Put the spinner under a textarea and beside a one-line field. If the text arrives in pieces, write each piece in yourself. A page-level wait is a Spinner on its own. In React, Ark UI does not fill the textarea for you.

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">
    <InputGroupTextarea
      aria-label="Content"
      className="min-h-[100px]"
      disabled
      placeholder="Generating content..."
    />
    <InputGroupAddon align="block-end" className="border-t">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background" data-disabled="true">
    <InputGroupInput
      aria-label="File"
      disabled
      placeholder="Uploading file..."
      type="text"
    />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
</div>

FAQ

How does the spinner sit under the textarea?

In an InputGroupAddon with align="block-end" and border-t, after the textarea.

And in the input?

An inline-end addon after the input.

How are the controls disabled?

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

How do I show generated text as it streams?

Make the textarea controlled, append each chunk to its value, and keep it read-only rather than disabled so people can scroll and select.

How are the controls labeled?

With aria-label, Content and File, since neither has a visible label.

Is the spinner announced?

It has aria-label="Loading". For a message that's read when loading starts, use a role="status" region.

API Reference

Input Group

Sets data-disabled, aria-label="Content", disabled, placeholder="Generating content...", align="block-end" and aria-label="File". 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