Skip to content

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

Free

Textarea Loading Input Group for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not fill the textarea for you.

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