refactor(editor): Create N8nCheckbox Vue component (#3678)

* ✨ Implementing N8nCheckbox Vue component

* ✨ Added checkbox support to N8nFormInput component

* 👌 Updating n8n-checkbox component so it supports indeterminate state and input event

* 💄 Adding the `labelSize` property to the `N8nCheckbox` component

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -1,5 +1,12 @@
 <template>
-	<n8n-input-label :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
+	<n8n-checkbox
+		v-if="type === 'checkbox'"
+		v-bind="$props"
+		@input="onInput"
+		@focus="onFocus"
+		ref="input"
+	></n8n-checkbox>
+	<n8n-input-label v-else :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot"></slot>
 			<n8n-select
@@ -56,6 +63,7 @@ import N8nInput from '../N8nInput';
 import N8nSelect from '../N8nSelect';
 import N8nOption from '../N8nOption';
 import N8nInputLabel from '../N8nInputLabel';
+import N8nCheckbox from '../N8nCheckbox';
 
 import { getValidationError, VALIDATORS } from './validators';
 import { Rule, RuleGroup, IValidator } from "../../types";
@@ -70,6 +78,7 @@ export default mixins(Locale).extend({
 		N8nInputLabel,
 		N8nOption,
 		N8nSelect,
+		N8nCheckbox,
 	},
 	data() {
 		return {
@@ -135,6 +144,12 @@ export default mixins(Locale).extend({
 		focusInitially: {
 			type: Boolean,
 		},
+		labelSize: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
 	},
 	mounted() {
 		this.$emit('validate', !this.validationError);