Usage of Checkbox and Switch with react hook form

[valerius21]

When using the register method of react hook form, the component does not change the state of the provided form.

export default function Survey() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<{isDesktop: boolean}>();
 // ....
 return (<form>
      <Label htmlFor="isDesktop">Are you using a desktop version of our app?</Label>
      <Checkbox {...register("isDesktop")} />
     <button>Submit</button>
</form>)
}

[its-monotype]

@vedantnn71 I think you need to use Controller for that.

...
import { Controller, useForm } from 'react-hook-form';

export default function Survey() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    control,
  } = useForm<{
    isDesktop: boolean;
  }>();
  
  ...

  return (
    <form>
      <Label htmlFor="isDesktop">
        Are you using a desktop version of our app?
      </Label>
      <Controller
        control={control}
        name="isDesktop"
        render={({ field: { onChange, value, ref } }) => (
          <Checkbox onCheckedChange={onChange} checked={value} ref={ref} />
        )}
      />
      <button>Submit</button>
    </form>
  );
}

[valerius21]

@its-monotype thank you! that helped me to solve it!

[austincollinpena]

Example for select input with react hook form controller. Confusing part for me was that the HTML select element is the SelectContent element

 <Controller
          control={control}
          name="jobPostEmployment"
          render={({
            field: { onChange, onBlur, value, name, ref },
            fieldState: { invalid, isTouched, isDirty, error },
            formState,
          }) => (
            <div>
              <Select name={name} onValueChange={onChange} defaultValue={value}>
                <SelectTrigger className="w-[180px] mt-2">
                  <SelectValue placeholder={formatSelectValue(value)} />
                </SelectTrigger>
                <SelectContent ref={ref}>
                  <SelectItem
                    value={
                      AdbJobPostEmploymentType.JobPostEmploymentTypeFullTime
                    }
                  >
                    {formatSelectValue(
                      AdbJobPostEmploymentType.JobPostEmploymentTypeFullTime
                    )}
                  </SelectItem>
                  <SelectItem
                    value={AdbJobPostEmploymentType.JobPostEmploymentTypeHourly}
                  >
                    {formatSelectValue(
                      AdbJobPostEmploymentType.JobPostEmploymentTypeHourly
                    )}
                  </SelectItem>
                  <SelectItem
                    value={
                      AdbJobPostEmploymentType.JobPostEmploymentTypePartTime
                    }
                  >
                    {formatSelectValue(
                      AdbJobPostEmploymentType.JobPostEmploymentTypePartTime
                    )}
                  </SelectItem>
                </SelectContent>
              </Select>

[Angelfire]

@austincollinpena Your comment saved my life!!! 🙏🏻

[MaximilianLloyd]

Using this approach, how can you define stuff like "required" and "minLength"?