1
Patterns

Validated Form

A submitted form with loading, server validation errors and a visible result status.

Import

Curated pattern example pending.
import { ValidatedForm } from "@/components/patterns/validated-form";

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-form

Import

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 ValidatedForm where the built-in public-handle example matches the product flow.
  • The form starts with admin to 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 errors prop 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.tsx to components/patterns/validated-form.tsx

Registry dependencies: @siteplane/base, @siteplane/button, @siteplane/field, @siteplane/form, @siteplane/input

On This Page