diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 8b3da44..e5fd267 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -84,6 +84,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
'properties.*.timezone' => 'sometimes|nullable',
'properties.*.width' => ['sometimes', Rule::in(['full','1/2','1/3','2/3','1/3','3/4','1/4'])],
'properties.*.allowed_file_types' => 'sometimes|nullable',
+ 'properties.*.use_toggle_switch' => 'boolean|nullable',
// Logic
'properties.*.logic' => ['array', 'nullable', new FormPropertyLogicRule()],
diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
index d4ea11c..d6ba46b 100644
--- a/resources/js/components/forms/CheckboxInput.vue
+++ b/resources/js/components/forms/CheckboxInput.vue
@@ -1,7 +1,7 @@
- {{ label }}
+ {{ label }} *
{{ help }}
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index 8361024..f5d3250 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+ {{ help }}
+
-
- {{ help }}
-
diff --git a/resources/js/components/forms/ToggleSwitchInput.vue b/resources/js/components/forms/ToggleSwitchInput.vue
new file mode 100644
index 0000000..21739bd
--- /dev/null
+++ b/resources/js/components/forms/ToggleSwitchInput.vue
@@ -0,0 +1,31 @@
+
+
+
+
+ {{ label }} *
+
+
+ {{ help }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index bbb854e..70fad78 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -16,6 +16,7 @@ import ImageInput from './ImageInput'
import DateInput from './DateInput';
import RatingInput from './RatingInput';
import FlatSelectInput from './FlatSelectInput';
+import ToggleSwitchInput from './ToggleSwitchInput';
// Components that are registered globaly.
[
@@ -34,7 +35,8 @@ import FlatSelectInput from './FlatSelectInput';
RichTextAreaInput,
DateInput,
RatingInput,
- FlatSelectInput
+ FlatSelectInput,
+ ToggleSwitchInput
].forEach(Component => {
Vue.component(Component.name, Component)
})
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 427acb0..7cdba83 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -317,6 +317,9 @@ export default {
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
+ if (field.type === 'checkbox' && field.use_toggle_switch) {
+ return 'ToggleSwitchInput'
+ }
return this.fieldComponents[field.type]
},
getFieldClasses (field) {
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index c0cf6f0..48bf09f 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -37,6 +37,24 @@
+
+
+
+ Checkbox
+
+
+ Advanced options for checkbox.
+
+
+ Use toggle switch
+
+
+ If enabled, checkbox will be replaced with a toggle switch
+
+
+