How to display validation failure for MUI Checkbox?

[j18ter]

The Checkbox component in redux-form-material-ui does not display validation errors. I tried creating a custom Checkbox component, but was utterly unsuccessful with the Checkbox from either material-ui or redux-form-material-ui as the starting point. Any suggestions how one can create a custom component from material-ui Checkbox that displays validation errors with redux-form?

[j18ter]

Attempting to do this with a function like renderField from the examples failed miserably, but here is how I ended up doing it:

import React from 'react';
import { Checkbox } from 'redux-form-material-ui';
const styles = {
    error: {
        color: 'red',
        fontSize: 'small'
    }
};
class ValidatedCheckbox extends Checkbox {
    render() {
        const {meta: {touched, error}} = this.props;
        return (
            <div>
              {super.render()}
              {touched && error && <span style={styles.error}>{error}</span>}
            </div>
        );
    }
}

[mihirsoni]

It seems you have solved this.

[tandonrajiv]

I am unable to add validation on checkbox can you please create a small form with this checkbox.

[pauloruizcares]

<Checkbox style={{ color: error ? "red" : undefined }} />