Redux Form - Checkbox with a default value and set it to be disabled

Cake Published at Dev

Cake

I'd like to confirm if this structure is right.

I need to set default value for the checkbox, so I've used the checked={input.value}. I also need to set it to be disabled, then I've passed the disabled prop:

// Using the Checkbox component  
<Field
  name="completed"
  label="Completed"
  disabled={this.props.disableCompleted}
  component={Checkbox}
/>

function Checkbox({ input, label, disabled }) {
  return (
    <div className="form-group">
      <label className="mt-checkbox">
        <input 
          type="checkbox" 
          disabled={disabled} 
          checked={input.value} 
          {...input} /> {label}
        <span></span>
      </label>
    </div>
  );
}

Is there any better way to do this?

KA01

Your implementation for enabling/disabling a checkbox is correct.

For displaying the default checked value for a checkbox you'll need to use defaultChecked. In your example, you're not passing down a input value to Checkbox (I see only disabled and label). Make sure you are and that it's a boolean value. Then you should be good to go.

Collected from the Internet

Please contact [email protected] to delete if infringement.