Submitting a form
The submit-to-outcome sequence covering the loading, success and failure states of one form.
Forms & Interaction Flows · 5 checks · 44 resources
Before you ship
5- 01Show button to submit — below the form fields, with copy that fits the form's purpose
- 02Show loading state after submission — the user must see the form is being submitted; consider the hover state before the press too
- 03Show success message when it submits — communicate the result back with a clear success message
- 04If it doesn't, show an error message — for invalid information or another failure, the error must be shown
- 05An error may occur because of the wrong information — when a field's criteria are not met, detail which field and why
Resources that help you build this
44- ARIA Authoring Practices Guide · W3C's 30 canonical widget patterns with keyboard maps and working HTML examples
- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Chakra UI · 114 accessible React components with a token-driven styling system
- Coss UI · Cal.com's design system: 60 Base UI primitives shipped as a shadcn registry
- Headless UI · 16 unstyled, fully accessible React and Vue primitives from Tailwind Labs
- HeroUI (formerly NextUI) · 71 React components on React Aria + Tailwind v4, with an MCP server
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-paste
- Loading UI · 47 MIT-licensed React loaders, spinners and skeletons via shadcn CLI
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickers
- Radix UI · Unstyled accessible React primitives, plus Themes, Colors and Icons
- React Aria · Adobe's unstyled React primitives with ARIA, keyboard, i18n and touch behavior built in
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- Ant Design · 73-component React library and design language for enterprise back-office apps
- Base UI · 37 unstyled React components from the Radix, Floating UI and MUI teams
- Better Upload · React file uploads straight to any S3-compatible bucket, with shadcn UI parts
- Carbon Design System · IBM's open-source design system: 44 documented components across five frameworks
- coss ui · Cal.com's Base UI + Tailwind v4 registry: 56 primitives and 500 particle variants
- ElevenLabs UI · First-party shadcn registry for voice agents: orbs, waveforms, transcripts
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kits
- Fluid Functionalism · shadcn registry of 23 components where motion carries state, not decoration
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- HyperUI · 537 free MIT Tailwind blocks across application, marketing and neobrutalism sets
- interior.dev · 54 MIT micro-interaction components for React, installable as a shadcn registry
- Kinetics · 153 spring-physics micro-interactions with copy-paste CSS and React
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTML
- Osmo · Paid vault of 231 GSAP/Webflow interaction recipes plus a 100-button pack
- Shadcn Form Builder · Drag fields into a form, export shadcn + Zod code for four form libraries
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLI
- Shopify Polaris · Shopify's admin design system, now shipped as framework-agnostic web components
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- Uiverse · Community archive of ~4,400 MIT-licensed CSS and Tailwind UI snippets
- Appllama Loader Buttons · 25 named loading-button motion studies: 13 WebGL, 12 in SVG, Canvas and CSS
- Cuelume · 17 synthesized UI sounds via Web Audio, zero runtime deps
- Dot Matrix · 90 dot-matrix loading animations installed one at a time through a shadcn registry
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfaces
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSS
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiring
- shadcncraft Free · 22 shadcncraft registry items that install with the plain shadcn CLI, no licence key
- TailwindAdmin · shadcn/ui admin dashboard template in React, Next.js, Vue, Angular and TanStack
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examples
- WDS Shadcn Registry · Five shadcn components for async actions, loading states and hard form inputs
- Pando (Pluralsight Design System) · Pluralsight's design system documented in zeroheight; public code frozen at v0.7.1
- Shadix UI · 14 motion-heavy shadcn add-ons: signature pad, datetime picker, reorder list