Change 'Checkbox' to 'Yes/ No' and allow multiple widgets

src/components/Field.jsx

@@ -25,32 +25,61 @@ const messages = defineMessages({
   },
 });
 
+const widgetMapping = {
+  single_choice: RadioWidget,
+  checkbox: CheckboxWidget,
+};
+
 /**
  * Field class.
  * @class View
  * @extends Component
  */
-const Field = ({
-  label,
-  description,
-  name,
-  field_type,
-  required,
-  input_values,
-  value,
-  onChange,
-  isOnEdit,
-  valid,
-  disabled = false,
-  formHasErrors = false,
-  id,
-}) => {
+const Field = (props) => {
+  const {
+    label,
+    description,
+    name,
+    field_type,
+    required,
+    input_values,
+    value,
+    onChange,
+    isOnEdit,
+    valid,
+    disabled = false,
+    formHasErrors = false,
+    id,
+    widget,
+  } = props;
   const intl = useIntl();
 
   const isInvalid = () => {
     return !isOnEdit && !valid;
   };
 
+  if (widget) {
+    const Widget = widgetMapping[widget];
+    const valueList =
+      field_type === 'yes_no'
+        ? [
+            { value: true, label: 'Yes' },
+            { value: false, label: 'No' },
+          ]
+        : [...(input_values?.map((v) => ({ value: v, label: v })) ?? [])];
+
+    return (
+      <Widget
+        {...props}
+        id={name}
+        title={label}
+        valueList={valueList}
+        invalid={isInvalid().toString()}
+        {...(isInvalid() ? { className: 'is-invalid' } : {})}
+      />
+    );
+  }
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -135,7 +164,7 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
-      {field_type === 'checkbox' && (
+      {(field_type === 'yes_no' || field_type === 'checkbox') && (
         <CheckboxWidget
           id={name}
           name={name}

src/components/FieldTypeSchemaExtenders/YesNoSchemaExtender.js

@@ -0,0 +1,25 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  field_widget: {
+    id: 'form_field_widget',
+    defaultMessage: 'Widget',
+  },
+});
+
+export const YesNoSchemaExtender = (intl) => {
+  return {
+    fields: ['widget'],
+    properties: {
+      widget: {
+        title: intl.formatMessage(messages.field_widget),
+        type: 'array',
+        choices: [
+          ['checkbox', 'Checkbox'],
+          ['single_choice', 'Radio'],
+        ],
+        default: 'checkbox',
+      },
+    },
+    required: ['widget'],
+  };
+};

src/components/FieldTypeSchemaExtenders/index.js

@@ -1,2 +1,3 @@
 export { SelectionSchemaExtender } from './SelectionSchemaExtender';
 export { FromSchemaExtender } from './FromSchemaExtender';
+export { YesNoSchemaExtender } from './YesNoSchemaExtender';

src/fieldSchema.js

@@ -39,9 +39,9 @@ const messages = defineMessages({
     id: 'form_field_type_multiple_choice',
     defaultMessage: 'Multiple choice',
   },
-  field_type_checkbox: {
-    id: 'form_field_type_checkbox',
-    defaultMessage: 'Checkbox',
+  field_type_yes_no: {
+    id: 'field_type_yes_no',
+    defaultMessage: 'Yes/ No',
   },
   field_type_date: {
     id: 'form_field_type_date',
@@ -76,7 +76,7 @@ export default (props) => {
       'multiple_choice',
       intl.formatMessage(messages.field_type_multiple_choice),
     ],
-    ['checkbox', intl.formatMessage(messages.field_type_checkbox)],
+    ['yes_no', intl.formatMessage(messages.field_type_yes_no)],
     ['date', intl.formatMessage(messages.field_type_date)],
     ['attachment', intl.formatMessage(messages.field_type_attachment)],
     ['from', intl.formatMessage(messages.field_type_from)],

src/index.js

@@ -18,6 +18,7 @@ import FieldSchema from 'volto-form-block/fieldSchema';
 import {
   SelectionSchemaExtender,
   FromSchemaExtender,
+  YesNoSchemaExtender
 } from './components/FieldTypeSchemaExtenders';
 export {
   submitForm,
@@ -43,6 +44,7 @@ const applyConfig = (config) => {
         single_choice: SelectionSchemaExtender,
         multiple_choice: SelectionSchemaExtender,
         from: FromSchemaExtender,
+        yes_no: YesNoSchemaExtender,
       },
       restricted: false,
       mostUsed: true,