Feat/multiple choices with columns

README.md

@@ -16,7 +16,7 @@ npm install --save @guidesmiths/react-form-builder
 
 ```jsx
 import React, { Component } from 'react'
-import { FormBuilder } from '@guidesmiths/react-form-builder
+import { FormBuilder } from '@guidesmiths/react-form-builder'
 import form from '../../forms/question/get.json'
 
 const onSubmitForm = (data) => {
@@ -329,10 +329,14 @@ Markdown example
 |  **registerConfig**       |    |  json     |
 | minimumLen | Minimum number of options that user must select  | int  | 0
 | maximumLen | Maximum number of options that user can select  | int  | -
-| required  | Define if the multiplecheckbox is required  |  boolean  | false
+| required  | Define whether answering the multiplecheckbox question is required or not  |  boolean  | false
+| questionsColumns  | Define in how many columns the checkboxes are going to be distributed  |  number  | 1
+
 
 #### Multiplecheckbox examples
+
 Basic multiplecheckbox
+
 ```yaml
 {
   "name": "multiplecheckbox_name",
@@ -400,6 +404,7 @@ Multiplecheckbox with images and labels
 ```
 
 Multiplecheckbox with minimumLen
+
 ```yaml
 {
   "name": "multiplecheckbox_name",
@@ -440,6 +445,8 @@ https://user-images.githubusercontent.com/79102959/134945855-52577cab-9b16-4df5-
 
 
 ### Phone
+
+
 | Option  	| Description  	| Type |   Default	|
 |---	|---	|:---:	|:---:	|
 |   name*	|  Phone component name  	|  string 	|  - 	|

example/src/App.js

@@ -24,6 +24,11 @@ import 'react-phone-number-input/style.css'
 
 const App = () => {
   const styles = {
+    forms: {
+      multipleCheckboxes: {
+        border: 'red 1px solid'
+      },
+    },
     fullWidth: {
       gridColumnStart: '1',
       gridColumnEnd: '3'

example/src/forms.json

@@ -75,7 +75,6 @@
           ]
         }
       },
-
       {
         "name": "phone",
         "type": "phone",
@@ -139,9 +138,42 @@
         "registerConfig": {
           "required": true
         }
+      },
+      {
+        "label": "Multip",
+        "type": "multiple_checkboxes",
+        "qId": "81b20f0d-6f31-4ab6-b0a5-eca42cbd965b",
+        "optionsColumns": 2,
+        "errorMessages": {
+          "required": "This field is required",
+          "maximumLen": "Maximum choises exceded",
+          "minimumLen": "Minimum choises required"
+        },
+        "registerConfig": {
+          "required": true,
+          "maximumLen": "2",
+          "minimumLen": "2"
+        },
+        "placeholder": "Multip",
+        "name": "multip",
+        "config": {
+          "options": [
+            {
+              "label": "one",
+              "value": "one"
+            },
+            {
+              "label": "two",
+              "value": "two"
+            },
+            {
+              "label": "three",
+              "value": "three"
+            }
+          ]
+        }
       }
     ],
-
     "question": [
       {
         "name": "phone",

example/src/index.js

@@ -1,61 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
 import { ThemeProvider, merge } from 'theme-ui'
 import { ExampleTheme } from 'react-form-builder'
 
-const theme = {
-  buttons: {
-    primary: {
-      color: 'red'
-    },
-    customButton: {
-      color: 'green'
-    }
-  },
-  select: {
-    backgroundColor: 'red',
-    option: {
-      color: 'purple',
-      fontSize: '30px'
-    },
-    control: {
-      backgroundColor: 'gray',
-      borderRadius: '20px'
-    }
-  },
-  forms: {
-    container: {
-      contact: {
-        display: 'grid',
-        backgroundColor: 'green'
-      }
-    },
-    multipleImageCheckboxes: {
-      contact: {
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        label: {
-          div: {
-            backgroundColor: '#fff',
-            border: '1px solid #ccc',
-            borderRadius: '50%',
-            cursor: 'pointer',
-            height: '28px',
-            left: '0',
-            width: '28px',
-            svg: {
-              visibility: 'hidden'
-            }
-          }
-        }
-      }
-    }
-  },
-  label: {
-    color: 'brown'
-  }
-}
+import App from './App'
+import theme from './theme'
 
 ReactDOM.render(
   <ThemeProvider theme={merge(ExampleTheme, theme)}>

example/src/theme.js

@@ -0,0 +1,54 @@
+const theme = {
+  buttons: {
+    primary: {
+      color: 'red'
+    },
+    customButton: {
+      color: 'green'
+    }
+  },
+  select: {
+    backgroundColor: 'red',
+    option: {
+      color: 'purple',
+      fontSize: '30px'
+    },
+    control: {
+      backgroundColor: 'gray',
+      borderRadius: '20px'
+    }
+  },
+  forms: {
+    container: {
+      contact: {
+        display: 'grid',
+        backgroundColor: 'green'
+      }
+    },
+    multipleImageCheckboxes: {
+      contact: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        label: {
+          div: {
+            backgroundColor: '#fff',
+            border: '1px solid #ccc',
+            borderRadius: '50%',
+            cursor: 'pointer',
+            height: '28px',
+            left: '0',
+            width: '28px',
+            svg: {
+              visibility: 'hidden'
+            }
+          }
+        }
+      }
+    }
+  },
+  label: {
+    color: 'brown'
+  }
+}
+
+export default theme