Concern

Form state and handling.

Technology

react-hook-form

Documentation

• Website: https://react-hook-form.com/
• Repository: https://github.com/react-hook-form/react-hook-form
• Getting started: https://react-hook-form.com/get-started
• Forms (React Hook Form + shadcn): https://ui.shadcn.com/docs/forms/react-hook-form

Integration

validation / zod

Validation via @hookform/resolvers with zod. Server updates via frontend services (see server-state): the service function is used as the mutation mutationFn; client errors (4xx) are applied to the form with setError from the returned envelope; server errors (5xx) throw and are shown in a toaster via mutation onError.

server-state / TanStack Query

Form submit uses useMutation with a frontend service (e.g. authService.login) as mutationFn. Client errors stay in the returned envelope for setError; server errors throw and are reported via toaster in onError.

static-typing / TypeScript

See: https://react-hook-form.com/get-started#TypeScript

Implementation

The boilerplate wires shadcn and react-hook-form as part of generation: the desktop app includes react-hook-form and @hookform/resolvers (zod). shadcn Field (and related) components are present in the desktop app (e.g. from the block added for login or from shadcn add field). At least one form in the generated app (e.g. the login form) is built using the controlled pattern described in the forms pattern and in the shadcn React Hook Form docs: useForm + zodResolver, FormProvider so fields can get control via useFormContext() without passing it as a prop, <Controller> (or the shared ControlledField), and shadcn <Field>, <FieldLabel>, <FieldError> with data-invalid and aria-invalid.

Version

v7

Compatibility

Require zod v4.