Basic <input type="checkbox"...> for a boolean field - how to?

[OnkelTem]

It is as simple as: the following code doesn't work with a regular boolean field:

const { register } = useFormState()
return <input type="checkbox" {...register(name)}/>

I really wished this was covered in the register doc page.

[sujinleeme]

useFormState hook doesn't return register

Of course, you can set the boolean value of the checkbox field.
[codesandbox]

export default function Form() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      enabled: false,
    },
  });
  
  const onSubmit = (data) => console.log(data);

  const enabled = useWatch({ name: "enabled", control });
  console.log({ enabled, type: typeof enabled });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="checkbox">
        <input type="checkbox" {...register("enabled")} />
        <label>label</label>
      </div>

      <input type="submit" />
    </form>
  );
}

[OnkelTem]

Thank you for the reply, Sujin!

I discovered that it was my fault: some other component was breaking the value :(
Thank you one more time.

P.S. Btw, useFormContext() does return register(), it allows us to create form part components.

Wait... I'm trying to share a link. Codesandbox is getting worse and worse every release...

UPDATE. Ok,they've limited the number of drafts a user may have. Currently I cannot save anything. Let me just paste my code here.

import * as React from "react";
import { useForm, useWatch } from "react-hook-form";
import "./styles.css";

function MyCheckbox() {
  const { register } = useFormContext();
  return (
    <div className="checkbox">
      <input type="checkbox" {...register("enabled")} />
      <label>label</label>
    </div>
  );
}

export default function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      enabled: false,
    },
  });
  const onSubmit = (data) => console.log(data);

  const enabled = useWatch({ name: "enabled", control });
  console.log({ enabled, type: typeof enabled });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MyCheckbox />
      <input type="submit" />
    </form>
  );
}

[sujinleeme]

Haven't you forgotten to wrap your form with the FormProvider?

[onlywei]

Does this mean that a checkbox won't use a boolean type unless we explicitly set defaultValue to a boolean? My checkbox keeps setting it's value to ["on"], and if I try to uncheck it, it becomes ["on", "on"]