Patterns
Validated Form
A submitted form with loading, server validation errors and a visible result status.
Import
Installation
With the Siteplane registry alias configured, add the component and import the installed source from your app.
CLI
pnpm dlx shadcn@4.16.1 add @siteplane/validated-formImport
import { ValidatedForm } from "@/components/patterns/validated-form";Need the machine-readable source metadata? View registry JSON.
Usage
Validated Form has source and usage docs, but no curated public example set yet.
import { ValidatedForm } from "@/components/patterns/validated-form";Purpose
Validated Form is a registry:component for a complete submit flow with loading feedback, a server-style field error and a visible submitted result.
API Reference
- Render
ValidatedFormwhere the built-in public-handle example matches the product flow. - The form starts with
adminto demonstrate the rejected response. Any other handle demonstrates the submitted state. - Replace the example copy and submit function after installation while preserving Form, Field, FieldError and the loading Button behavior.
Motion
- The recipe adds no motion. The loading Button retains its native Siteplane UI feedback.
- Reduced motion behavior is inherited from the installed primitives.
Accessibility
- The Field label names the Input and FieldError announces validation through the Form contract.
- Submission status uses a live status role without moving focus away from the form.
Implementation Guidance
- Install with
pnpm dlx shadcn@4.16.1 add @siteplane/validated-form. - Keep server errors in the Form
errorsprop and keep the loading state on the submit Button. - Use a custom form composition when the flow needs multiple fields or different validation behavior.
Registry
Source Contract
Registry item: validated-form
Files
src/components/patterns/validated-form.tsxto components/patterns/validated-form.tsx
Registry dependencies: @siteplane/base, @siteplane/button, @siteplane/field, @siteplane/form, @siteplane/input