Form with Loading State

A form showing loading and submitting states with disabled fields and animated spinner

Providing clear feedback during form submission is essential for good user experience. This pattern demonstrates how to handle loading states with disabled fields, animated spinners, and contextual button text.

Form with Loading State preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-loading-state.json

npx shadcn@latest add https://www.shadcn.io/r/form-loading-state.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-loading-state.json

bunx shadcn@latest add https://www.shadcn.io/r/form-loading-state.json

Disabled Fields

Disabled field states across input types

Readonly Fields

Read-only non-editable field display

Success State

Success confirmation after submission

Error State

Error handling with retry functionality

Validation Inline

Inline field validation messages

Required Optional

Required vs optional field indicators

FAQ

Last updated on March 24, 2026

Was this page helpful?

Language Selection Dropdown

A language selector displaying native language names with ISO codes for internationalization.

Minimal Form

An ultra-minimal form with no visible labels, using placeholders for a clean aesthetic

Form with Loading State