diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts b/packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts
new file mode 100644
index 0000000000..a253cba7ac
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts
@@ -0,0 +1,36 @@
+/* tslint:disable:variable-name */
+import N8nCheckbox from "./Checkbox.vue";
+import { StoryFn } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+	title: 'Atoms/Checkbox',
+	component: N8nCheckbox,
+};
+
+const methods = {
+	onInput: action('input'),
+	onFocus: action('focus'),
+	onChange: action('change'),
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCheckbox,
+	},
+	data: () => ({
+		isChecked: false,
+	}),
+	template: '<n8n-checkbox v-model="isChecked" v-bind="$props" @input="onInput"></n8n-checkbox>',
+	methods,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+	label: 'This is a default checkbox',
+	tooltipText: 'Checkbox tooltip',
+	disabled: false,
+	indeterminate: false,
+	size: 'small',
+};
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
new file mode 100644
index 0000000000..88c4c31780
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -0,0 +1,66 @@
+<template>
+	<el-checkbox
+		v-bind="$props"
+		:disabled="disabled"
+		:indeterminate="indeterminate"
+		:value="value"
+		@change="onChange"
+	>
+		<n8n-input-label
+			:label="label"
+			:tooltipText="tooltipText"
+			:bold="false"
+			:size="labelSize"
+		></n8n-input-label>
+	</el-checkbox>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ElCheckbox from 'element-ui/lib/checkbox';
+import N8nInputLabel from '../N8nInputLabel';
+
+export default Vue.extend({
+	name: 'n8n-checkbox',
+	components: {
+		ElCheckbox,
+		N8nInputLabel,
+	},
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		tooltipText: {
+			type: String,
+			required: false,
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		labelSize: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
+	},
+	methods: {
+		onChange(e) {
+			this.$emit("input", e);
+		},
+	}
+});
+</script>
+
+<style lang="scss" module>
+</style>
diff --git a/packages/design-system/src/components/N8nCheckbox/index.ts b/packages/design-system/src/components/N8nCheckbox/index.ts
new file mode 100644
index 0000000000..a60ee7eb39
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/index.ts
@@ -0,0 +1,3 @@
+import N8nCheckbox from './Checkbox.vue';
+
+export default N8nCheckbox;
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index e81476f2d1..659368f09d 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/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);
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
index e736bec3f0..3f8b588511 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
@@ -68,6 +68,15 @@ FormInputs.args = {
 				],
 			},
 		},
+		{
+			name: 'agree',
+			properties: {
+			  type: 'checkbox',
+			  label: 'Signup for newsletter Signup for newsletter Signup for newsletter vSignup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter v vSignup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter',
+			  labelSize: 'small',
+			  tooltipText: 'Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team'
+			}
+		  }
 	],
 };