Redux-form-material-ui: How to display validation failure for MUI Checkbox?

Created on 27 Jul 2017 · 3Comments · Source: erikras/redux-form-material-ui

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?

Source

j18ter

👍1

Most helpful comment

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>
        );
    }
}

j18ter on 28 Jul 2017

❤5 👍5

All 3 comments

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>
        );
    }
}

j18ter on 28 Jul 2017

❤5 👍5

It seems you have solved this.