diff --git a/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js b/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js
new file mode 100644
index 0000000000..872caa22f8
--- /dev/null
+++ b/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomRadioGroup from '../CustomRadioGroup';
+
+const BooleanRadioGroup = ({ onChange, name, ...rest }) => {
+ const handleChange = e => {
+ const checked = e.target.value !== 'false';
+
+ onChange({ target: { name, value: checked, type: 'radio' } });
+ };
+
+ return ;
+};
+
+BooleanRadioGroup.propTypes = {
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default BooleanRadioGroup;
diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js
index 8133d982fe..523ae27c48 100644
--- a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js
+++ b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js
@@ -10,23 +10,6 @@ import { Wrapper } from './components';
const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => {
const { formatMessage } = useIntl();
- const handleChange = e => {
- let checked;
-
- if (
- name === 'multiple' ||
- name === 'single' ||
- name === 'createComponent' ||
- name === 'repeatable'
- ) {
- checked = e.target.value !== 'false';
- } else {
- checked = e.target.value;
- }
-
- onChange({ target: { name, value: checked, type: 'radio' } });
- };
-
return (
@@ -43,7 +26,7 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => {
checked={radio.value === value}
value={radio.value}
key={radio.value}
- onChange={handleChange}
+ onChange={onChange}
type="radio"
/>
diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js b/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js
index bdb17ea75e..ec2398f28a 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js
@@ -41,7 +41,7 @@ const baseForm = {
defaultMessage: 'Type',
},
name: 'repeatable',
- type: 'radio-group',
+ type: 'boolean-radio-group',
size: 12,
radios: [
{
@@ -180,7 +180,7 @@ const baseForm = {
},
name: 'multiple',
size: 12,
- type: 'radio-group',
+ type: 'boolean-radio-group',
radios: [
{
title: {
diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js b/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js
index 2194e85fdb..8d4167ba61 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js
@@ -6,7 +6,7 @@ const componentField = {
defaultMessage: 'Type',
},
name: 'createComponent',
- type: 'radio-group',
+ type: 'boolean-radio-group',
size: 12,
radios: [
{
diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/index.js
index 53d28367b1..26396a06b5 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/index.js
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/index.js
@@ -32,6 +32,7 @@ import DraftAndPublishToggle from '../DraftAndPublishToggle';
import FormModalHeader from '../FormModalHeader';
import BooleanDefaultValueSelect from '../BooleanDefaultValueSelect';
+import BooleanRadioGroup from '../BooleanRadioGroup';
import CheckboxWithNumberField from '../CheckboxWithNumberField';
import CustomRadioGroup from '../CustomRadioGroup';
import ContentTypeRadioGroup from '../ContentTypeRadioGroup';
@@ -864,6 +865,7 @@ const FormModal = () => {
const genericInputProps = {
customInputs: {
'allowed-types-select': AllowedTypesSelect,
+ 'boolean-radio-group': BooleanRadioGroup,
'checkbox-with-number-field': CheckboxWithNumberField,
'component-icon-picker': ComponentIconPicker,
'content-type-radio-group': ContentTypeRadioGroup,