form_builder

Use React Hook Form with the zodResolver to connect a Zod schema defining rules like email format and minimum password length. Set mode to onBlur so fields validate when they lose focus, then display errors via the formState errors object.

On-blur validation is recommended for most forms because it avoids interrupting users while typing. After a field's first error, switch to onChange so corrections show immediate feedback, and use debounced validation for API-based checks like username availability.

React Hook Form is recommended here for its smaller 8KB bundle and better performance through uncontrolled inputs. Pair it with Zod for TypeScript-first schema validation rather than managing validation logic manually.

Associate every input with a label or aria-label, link errors using aria-describedby, and announce validation messages with aria-live regions. Move focus to the first invalid field on submit and never convey errors by color alone.

Yes, define a Pydantic BaseModel with typed fields like EmailStr and Field constraints such as min_length. FastAPI automatically validates incoming request bodies and returns 422 responses with detailed error locations when validation fails.

Use a radio group for 2-7 options, a select dropdown for more than 7 options, and an autocomplete combobox when there are more than 15 options. This keeps the interface scannable and reduces cognitive load.