React Hook Form set checkbox to checked state

Question

I am trying out React-Hook-form

The simple code for the checkbox is as below:

import React from 'react'
import { useForm } from 'react-hook-form'

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data: any) => console.log(data)
  console.log(errors)

  return (
    <div className='mx-auto justify-center p-32 flex'>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='p-2'>
          <label htmlFor=''>January</label>
          <input
            type='checkbox'
            placeholder='January'
            {...register('January', {})}
            className='mx-3'
            checked
          />
        </div>
        <div className='p-2'>
          <label htmlFor=''>February</label>
          <input
            type='checkbox'
            placeholder='February'
            {...register('February', {})}
            className='mx-3'
          />
        </div>
        <input type='submit' />
      </form>
    </div>
  )
}

I can submit the form correctly but I have like the January checkbox to start off as a checked box but when I put 'checked' as shown in the code, I somehow could not 'uncheck' it.

I seem to be missing something and any help would be greatly appreciated.

Answer 1

The issue with passing checked is that it takes control away from useForm to manage the checkbox.

Imagine the function register() returns { checked: true/false, onChange: changeHandler }. So if we where to look at the attributes this produces the following.

<input
  type='checkbox'
  placeholder='January'
  {...register('January', {})}
  className='mx-3'
  checked
/>

<input
  type='checkbox'
  placeholder='January'
  {...{
    checked: true/false,
    onChange: changeHandler,
  }}
  className='mx-3'
  checked
/>

<input
  type='checkbox'
  placeholder='January'
  checked={true/false}
  onChange={changeHandler}
  className='mx-3'
  checked
/>

Since checked is present twice, the latter will override the former. In this case your checked is last so it overrides the value that is managed by useForm.

Passing it before the register() call won't help you either, since your default value will be overwritten by a value managed by useForm and is therefore never used.

---

Now that I've cleared up why this issue happens let's move on to the solution.

useForm allows you to pass a default values when you initially call the hook.

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({ defaultValues: { January: true } });

// ...

<input
  type='checkbox'
  {...register("January")}
  className='mx-3'
/>

---

Alternatively, instead of giving each checkbox its own name, you could also use "months". If there are multiple checkboxes using the same name, the result will not be true/false, but rather an array containing the values.

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  defaultValues: { months: ["January"] }
  //               only January ^ is checked by default
});

//...

<input
  type='checkbox'
  value='January'
  {...register("months")}
  className='mx-3'
/>
<input
  type='checkbox'
  value='February'
  {...register("months")}
  className='mx-3'
/>

Answer 2

The complete working code based on @3limin4tOr

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: { months: ['January'] },
  })

  const onSubmit = (data: any) => console.log(data)
  console.log(errors)

  return (
    <div className='mx-auto justify-center p-32 flex'>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='p-2'>
          <label htmlFor=''>January</label>
          <input
            type='checkbox'
            value='January'
            placeholder='January'
            {...register('months')}
            className='mx-3'
          />
        </div>
        <div className='p-2'>
          <label htmlFor=''>February</label>
          <input
            type='checkbox'
            value='February'
            placeholder='February'
            {...register('months')}
            className='mx-3'
          />
        </div>
        <input type='submit' />
      </form>
    </div>
  )
}