Let's tackle these one-by-one :)

Handle Validated Data Post Validate

However, how do you retrieve the validated data after the validation has succeeded?

You don't! At least not from our API. You parse formData again manually using your tool of choice. I would suggest using the same as we do internally (decode-formdata), but you can use any tool you'd like.

Add More Errors

And how should you return an error outside of the serverValidate call so that it shows on the client?

You would add the form error to the onServerValidate behavior ideally. You want your non-form validation to occur outside of the serverValidate function call. If you wanted to pass state to the client beyond the server you'd:

// From the action.ts
return {formState: validatedFields};

// From client-component.tsx
const [state, action] = useActionState(someAction, {formState: initialFormState})

const {formState} = state;

const form = useForm({
  ...formOpts,
  transform: useTransform((baseForm) => mergeForm(baseForm, formState), [formState]),
})

Zod Integration

Furthermore, how would you integrate Zod or other validators in createServerValidate?

This is more straightforward than you might think:

// shared-code.ts
export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
  validatorAdapter: zodAdapter()
})

// action.ts
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: z.object({/*...*/})
})

You can even:

// shared-code.ts
export const schema = z.object({/*...*/});

export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
  validatorAdapter: zodAdapter(),
  validators: {
    onChange: schema
  }
})

// action.ts
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: schema
})

Please Review This PR :)

We have a note to improve the PR DX like so:

#783

What do you think? Better or worse?