Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Applications

Spinner in Input Group for React

A disabled input and textarea with a spinner in their addons while a message is validated.

Framework
UI library

While a message is checked or sent, the field should say so. In these two Input Group fields, a Spinner sits in the input's end addon, and in the textarea's bottom addon next to Validating... and a send button. Both fields are disabled meanwhile.

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

Why are the field and the textarea disabled?

Both set disabled, and both have aria-label Message. The one-line field is an InputGroupInput with type text. The other is an InputGroupTextarea. The placeholder on each is "Send a message...".

Where is the spinner on the one-line field?

In an InputGroupAddon with align set to inline-end, after the input. The addon's only child is a Spinner at the default size.

What is in the textarea's addon?

An InputGroupAddon with align set to block-end. Inside it: a Spinner, the text "Validating...", and an InputGroupButton. className ms-auto on that button pushes it to the end of the row.

What is the send button?

An InputGroupButton with aria-label Send, size icon-xs, and variant default. The icon is ArrowUpIcon with aria-hidden. The button has no click handler in this file.

What does the spinner announce?

Each Spinner has role="status" and an aria-label of Loading. On the textarea, the visible word "Validating..." is read as well. Pass aria-label="Validating" on that spinner when the status should match the word.

Why are both fields in an InputGroup?

Each InputGroup is the box that lines the control up with its InputGroupAddon. This file gives both groups className bg-background, stacked in a column with gap-4 and max-w-md.

All 17 spinner examples