`setValueAs` doesn’t work for checkboxes and radio inputs

Describe the bug

I’ve found in the docs that setValueAs can be used to manipulate submitted value based on the input, but it seems like only the text inputs (like type="text", type="number" etc) and select dropdowns support this.

I didn’t manage to get any working results with input[type="checkbox"] and input[type="radio"] but it could possible that I’m doing something wrong. In that case please correct me.

Working example:

const {register} = useForm()
return (
  <input
    type="text"
    name="number"
    ref={register({
      setValueAs: (value) => parseInt(value, 10),
    })}
  />
)

Not working example:

const {register} = useForm()
return (
  <input
    type="radio"
    name="boolean"
    value="true"
    ref={register({
      setValueAs: (value) => JSON.parse(value),
    })}
  />
)

To Reproduce
Steps to reproduce the behavior:

  1. Go to codesandbox reproduction
  2. Select some checkboxes, radio buttons, dropdowns and type in numbers
  3. Submit the form
  4. Notice that only <select> and text inputs get modified by setValueAs

Codesandbox link (Required)

https://codesandbox.io/s/react-hook-form-reproduction-q6gxf?file=/src/index.js

Expected behavior

"data.array" should be of type number[] and "data.radio" of type boolean but instead they are string[] and string respectively.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome 86
  • Version: 6.15.1

1 possible answer(s) on “`setValueAs` doesn’t work for checkboxes and radio inputs

  1. Understandable, however a change to the documentation would be helpful to avoid further confusion, since I don’t think this behavior is stated anywhere.