What is necessary to make a checkbox component work with Controller?

[bartylla]

I have several own components for all kind of inputs and I wanted to use the Controller to integrate all RHF functionalities. For the regular inputs (type is email, password, text, number) everything works perfect but I'm unable to make it work for the checkbox type.

Here is a sandbox for it.

Can you tell me what I need to do to get the value recognized by RHF?

[bluebill1049]

controller's name need to be unique. you may want to build a wrapper component like MUI: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r take a look the radio group.

[bartylla]

Thanks for your answer! I think my initial question was not detailed enough and the example was maybe misleading. Sorry for it.

I'm not interested in something like a checkbox group (in the sandbox I tried only different approaches to see what is working or not). My main problem is that the field value is undefined as soon I'm using a checkbox component in combination with Controller (based on your provided example I'm looking for the approach of lines 66:71).
Therefore I modified the provided example to have only a single input of type checkbox in place. Nevertheless the value is still undefined as soon I watch the field or submit the form.

[bartylla]

BTW I checked in parallel the other approaches mentioned in your documentation and I switched fully to option one (supporting a ref in the component). This allows me to avoid the Controller but I still don't get the problem of the controller based solution in the context of checkboxes.

[bluebill1049]

i see your problem now, by default Controller assigns value to value prop, you can use render prop to solve this problem.

<Controller
  control={control} 
  name="test" 
  render(({ onChange, onBlur, value }) => (
    <Input 
      onTextChange={onChange} 
      onTextBlur={onBlur} 
      textValue={value}  // use checked here
    />
  ))
/>