Form

Good forms are clear, concise, and considerate. Use single-column layouts, clear labels, helpful hints, inline validation, logical field order, and appropriate input types. Minimize required fields, provide helpful error messages, and indicate progress in long forms.

The Form component integrates with Zod schemas for type-safe validation. Define rules (required, min length, email format, etc.) once, and errors appear automatically when users submit or blur fields. Validation messages should be specific and actionable.

Both! Validate on blur for immediate feedback as users complete each field, catching errors early. Also validate on submit as a final check. Never show errors as users type—let them finish first to avoid frustrating red text chasing their cursor.

Break long forms into logical steps with progress indicators. Save state between steps, allow backward navigation, and show a summary before final submission. Each step should be completable in under a minute to maintain user momentum.

When submitting forms, disable inputs and show a loading spinner on the submit button. Display success messages clearly, and on errors, re-enable the form, show specific error messages, and keep user-entered data so they don't have to start over.

Yes, this Figma Form component matches the shadcn/ui implementation, ensuring your forms work seamlessly with React Hook Form and Zod validation from design to production with consistent patterns and behaviors.