diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js
new file mode 100644
index 0000000000..f354c48dbf
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js
@@ -0,0 +1,133 @@
+/**
+ *
+ * InputCheckbox
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { isEmpty, isFunction, isObject } from 'lodash';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+class InputCheckbox extends React.Component {
+ handleChange = () => {
+ const target = {
+ name: this.props.name,
+ type: 'checkbox',
+ value: !this.props.value,
+ };
+
+ this.props.onChange({ target });
+ }
+
+ render() {
+ const {
+ autoFocus,
+ className,
+ disabled,
+ label,
+ name,
+ onBlur,
+ onFocus,
+ style,
+ tabIndex,
+ value,
+ } = this.props;
+ const checkbox = (
+
+ );
+
+ let content =
;
+
+ if (typeof(label) === 'string') {
+ content = (
+
+ );
+ }
+
+ if (isFunction(label)) {
+ content = (
+
+ );
+ }
+
+ if (isObject(label) && label.id) {
+ content = (
+
+ {(message) => (
+
+ )}
+
+ );
+ }
+ return (
+
+ {content}
+
+ );
+ }
+}
+
+InputCheckbox.defaultProps = {
+ autoFocus: false,
+ className: '',
+ disabled: false,
+ label: '',
+ onBlur: () => {},
+ onFocus: () => {},
+ style: {},
+ tabIndex: '0',
+ value: false,
+};
+
+InputCheckbox.propTypes = {
+ autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ label: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ PropTypes.shape({
+ id: PropTypes.string,
+ params: PropTypes.object,
+ }),
+ ]),
+ name: PropTypes.string.isRequired,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func,
+ style: PropTypes.object,
+ tabIndex: PropTypes.string,
+ value: PropTypes.bool,
+};
+
+export default InputCheckbox;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss
new file mode 100644
index 0000000000..a7fac86bd0
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss
@@ -0,0 +1,15 @@
+.inputCheckbox {
+ margin-bottom: 0;
+ font-weight: 400;
+ label {
+ cursor: pointer;
+ }
+ input {
+ margin-right: 1.2rem;
+ }
+
+}
+
+.disabled {
+ cursor: not-allowed;
+}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
new file mode 100644
index 0000000000..54e28570f9
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
@@ -0,0 +1,213 @@
+/**
+ *
+ * InputCheckboxWithErrors
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { includes, isEmpty, isObject, isFunction, mapKeys, reject } from 'lodash';
+import cn from 'classnames';
+
+// Design
+import Label from 'components/Label';
+import InputDescription from 'components/InputDescription';
+import InputErrors from 'components/InputErrors';
+import InputCheckbox from 'components/InputCheckbox';
+
+import styles from './styles.scss';
+
+class InputCheckboxWithErrors extends React.Component {
+ state = { errors: [] };
+
+ componentDidMount() {
+ // Display input error if it already has some
+ const { errors } = this.props;
+ if (!isEmpty(errors)) {
+ this.setState({ errors });
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ // Check if errors have been updated during validations
+ if (nextProps.didCheckErrors !== this.props.didCheckErrors) {
+ // Remove from the state the errors that have already been set
+ const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors;
+ this.setState({ errors });
+ }
+ }
+
+ render () {
+ const {
+ autoFocus,
+ className,
+ customBootstrapClass,
+ deactivateErrorHighlight,
+ disabled,
+ errorsClassName,
+ errorsStyle,
+ inputClassName,
+ inputDescription,
+ inputDescriptionClassName,
+ inputDescriptionStyle,
+ inputStyle,
+ label,
+ labelClassName,
+ labelStyle,
+ name,
+ noErrorsDescription,
+ onBlur,
+ onChange,
+ onFocus,
+ placeholder,
+ style,
+ tabIndex,
+ title,
+ value,
+ } = this.props;
+
+ const handleBlur = onBlur ? onBlur : () => {};
+ let inputTitle = '';
+
+ let spacer = !isEmpty(inputDescription) ? : ;
+
+ if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+ spacer = ;
+ }
+
+ if (isObject(title) && title.id) {
+ inputTitle = (
+
+
+
+ );
+ }
+
+ if (isFunction(title)) {
+ inputTitle = title();
+ }
+
+ return (
+
+ {inputTitle}
+
+
+
+ {spacer}
+
+ );
+ }
+}
+
+InputCheckboxWithErrors.defaultProps = {
+ autoFocus: false,
+ className: '',
+ customBootstrapClass: 'col-md-3',
+ deactivateErrorHighlight: false,
+ didCheckErrors: false,
+ disabled: false,
+ onBlur: () => {},
+ onFocus: () => {},
+ errors: [],
+ errorsClassName: '',
+ errorsStyle: {},
+ inputClassName: '',
+ inputDescription: '',
+ inputDescriptionClassName: '',
+ inputDescriptionStyle: {},
+ inputStyle: {},
+ label: '',
+ labelClassName: '',
+ labelStyle: {},
+ noErrorsDescription: false,
+ placeholder: 'app.utils.placeholder.defaultMessage',
+ style: {},
+ tabIndex: '0',
+ title: '',
+ validations: {},
+ value: false,
+};
+InputCheckboxWithErrors.propTypes = {
+ autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ customBootstrapClass: PropTypes.string,
+ deactivateErrorHighlight: PropTypes.bool,
+ didCheckErrors: PropTypes.bool,
+ disabled: PropTypes.bool,
+ errors: PropTypes.array,
+ errorsClassName: PropTypes.string,
+ errorsStyle: PropTypes.object,
+ inputClassName: PropTypes.string,
+ inputDescription: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ PropTypes.shape({
+ id: PropTypes.string,
+ params: PropTypes.object,
+ }),
+ ]),
+ inputDescriptionClassName: PropTypes.string,
+ inputDescriptionStyle: PropTypes.object,
+ inputStyle: PropTypes.object,
+ label: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ PropTypes.shape({
+ id: PropTypes.string,
+ params: PropTypes.object,
+ }),
+ ]),
+ labelClassName: PropTypes.string,
+ labelStyle: PropTypes.object,
+ name: PropTypes.string.isRequired,
+ noErrorsDescription: PropTypes.bool,
+ onBlur: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.func,
+ ]),
+ onChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func,
+ placeholder: PropTypes.string,
+ style: PropTypes.object,
+ tabIndex: PropTypes.string,
+ title: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ PropTypes.shape({
+ id: PropTypes.string,
+ params: PropTypes.object,
+ }),
+ ]),
+ validations: PropTypes.object,
+ value: PropTypes.bool,
+};
+
+export default InputCheckboxWithErrors;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
new file mode 100644
index 0000000000..29ccc32e0d
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
@@ -0,0 +1,27 @@
+.container {
+ margin-bottom: 1.5rem;
+ font-size: 1.3rem;
+ font-family: 'Lato';
+}
+
+.spacer {
+ height: .5rem;
+}
+
+.inputCheckboxDescriptionContainer {
+ width: 150%;
+ margin-top: .2rem;
+ padding-left: 2.5rem;
+ line-height: 1.2rem;
+
+ > small {
+ color: #9EA7B8;
+ font-family: 'Lato';
+ font-size: 1.2rem;
+ }
+}
+
+.inputTitle {
+ margin-bottom: 1.7rem;
+ font-weight: 500;
+}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
index 3a7d75defc..e41746b06c 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -7,6 +7,7 @@ import React from 'react';
import PropTypes from 'prop-types';
// Design
+import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors';
import InputEmailWithErrors from 'components/InputEmailWithErrors';
import InputNumberWithErrors from 'components/InputNumberWithErrors';
import InputSearchWithErrors from 'components/InputSearchWithErrors';
@@ -19,6 +20,7 @@ import InputToggleWithErrors from 'components/InputToggleWithErrors';
const DefaultInputError = ({ type }) => Your input type: {type} does not exist
const inputs = {
+ checkbox: InputCheckboxWithErrors,
email: InputEmailWithErrors,
number: InputNumberWithErrors,
password: InputPasswordWithErrors,
@@ -42,6 +44,7 @@ InputsIndex.propTypes = {
export default InputsIndex;
export {
+ InputCheckboxWithErrors,
InputEmailWithErrors,
InputNumberWithErrors,
InputPasswordWithErrors,