3^rd Practical Class:
Forms

Uncontrolled Inputs

• ✅ for simple forms with native validation
• ⛔️ no control over input values before submission

Controlled Inputs

• : current input value
• : called each time user changes value in input

• ✅ live input values
• ❌ component re-renders on every field value change

React Hook Form

react-hook-form.com

Using custom hooks and React context to control form fields

Custom Controlled Inputs

• API - context providing the form state
• API - returns form methods passed to
• API - connects a field to form context

Schema-based Form Validation

Validation Libraries

• Zod
• Yup
• Valibot
• ...and more

Zod

https://github.com/colinhacks/zod

Forms in our Quacker App

Base Components

• • Field.tsx - using Form Control components from Chakra UI
• • Form.tsx - combining FormProvider from React Hook Form and
  • FormField.tsx - connecting Field to React Hook Form using useController
    • InputField.tsx - FormField with Chakra UI Input
    • CheckboxField.tsx - FormField with Chakra UI Checkbox

Form Example with Validation

• • SignUpForm.tsx