Form Demo

Demonstrates React Hook Form with Zod validation and server error mapping.

Create Demo Item

Fill out the form to create a new item. Try submitting with invalid data to see validation.

Test Server Validation

The server validates the same rules as the client. Try bypassing client validation:

How to test server validation:

Open browser DevTools (Network tab)
Submit a valid form to see the POST request
Right-click the request → "Edit and Resend"
Modify the body to have an empty title
The response will include fieldErrors

Server response example:

{
  "code": "VALIDATION_FAILED",
  "message": "Request validation failed",
  "userMessage": "Please check your input...",
  "correlationId": "abc-123",
  "details": {
    "fieldErrors": {
      "title": ["Title is required"]
    }
  }
}

Alternative Field Pattern

Atlas also supports a simpler Field component pattern for non-RHF forms:

Title

Uses the Field component from @atlas/ui

With Error

This field has an error state