Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Spinner

Textarea Loading Input Group for React

A disabled textarea with a spinner under it and a disabled input with a spinner at its end.

Framework
UI library

Loading states for both control types. The textarea, disabled while content is generated, has a Spinner in a bordered block-end row; the upload input has one at its end.

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

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.

All 39 input group examples