diff --git a/apps/demo/src/locales/en/form.json b/apps/demo/src/locales/en/form.json
index e9116ac91..3d7467dea 100644
--- a/apps/demo/src/locales/en/form.json
+++ b/apps/demo/src/locales/en/form.json
@@ -3,6 +3,9 @@
     "submit": "Submit"
   },
   "errors": {
+    "checkbox": {
+      "min": "Please select at least {min} options"
+    },
     "daysInput": {
       "invalid": "Please provide number of days within a year"
     },
@@ -40,25 +43,31 @@
     }
   },
   "label": {
+    "accept": "Accept the terms and conditions to proceed",
     "appointmentDate": "Appointment date",
     "appointmentTime": "Appointment time",
     "arrivalDate": "Arrival date",
+    "assumptions": "Assumptions",
     "availableDatetime": "Available datetime",
     "basicInput": "Basic",
     "bike": "Bike",
     "car": "Car",
+    "checkbox": "Checkbox input",
+    "consequences": "Consequences",
     "contentElement": "Content element",
     "customColsRowsInput": "With cols and rows props",
     "customErrorMessageInput": "With custom error message",
     "customFormat": "Custom format",
     "customValidationInput": "With custom validation",
     "customStyleInput": "Custom style",
+    "dailySynchro": "Select the sections that should be in the daily synchro",
     "dateOfBirth": "Date of birth",
     "datePicker": "Date picker",
     "dateRange": "Date range",
     "dateTimePicker": "Datetime picker",
     "daysInput": "Days input",
     "debouncedTypeahead": "With debounce time prop",
+    "deliverableList": "A list of your daily deliverables",
     "disabled": "Disabled",
     "disableWeekDays": "Disable week days",
     "disabledMultiSelect": "Disabled multiselect",
@@ -67,6 +76,7 @@
     "expiresAfter": "Expires after",
     "female": "Female",
     "gender": "Gender",
+    "generalQuestions": "General questions",
     "iconSlot": "Icon slot",
     "input": "Input",
     "inputWithType": "With type prop",
@@ -80,9 +90,12 @@
     "monthAndYearPicker": "Month and year picker",
     "monthPicker": "Month picker",
     "multiCalendars": "Multicalendar",
+    "multiCheckbox": "Multiple checkbox input",
     "multiSelect": "Multiselect",
+    "next": "Next",
     "number": "Number",
     "one": "One",
+    "other": "Other",
     "password": "Password",
     "pickupDate": "Pickup date",
     "presentationDate": "Presentation date",
@@ -90,7 +103,9 @@
     "reportDate": "Report date",
     "size": "Size",
     "select": "Select",
+    "solutions": "Solutions",
     "submit": "Submit",
+    "summary": "Summary",
     "switch": "Switch",
     "textarea": "Textarea",
     "textInput": "Text input",
@@ -104,6 +119,7 @@
     "valid": "Show valid state",
     "vehicle": "Vehicle",
     "withI18n": "With i18n",
+    "workInProgress": "Work in progress",
     "year": "Year",
     "yearPicker": "Year picker"
   },
diff --git a/apps/demo/src/locales/fr/form.json b/apps/demo/src/locales/fr/form.json
index 050118431..c2ce2ce3b 100644
--- a/apps/demo/src/locales/fr/form.json
+++ b/apps/demo/src/locales/fr/form.json
@@ -40,25 +40,31 @@
     }
   },
   "label": {
+    "accept": "Accept the terms and conditions to proceed",
     "appointmentDate": "Appointment date[fr]",
     "appointmentTime": "Appointment time[fr]",
     "arrivalDate": "Arrival date[fr]",
+    "assumptions": "Assumptions",
     "availableDatetime": "Available datetime[fr]",
     "basicInput": "Basic[fr]",
     "bike": "Bike",
     "car": "Car",
+    "checkbox": "Checkbox input",
+    "consequences": "Consequences",
     "contentElement": "Content element",
     "customColsRowsInput": "With cols and rows props[fr]",
     "customErrorMessageInput": "With custom error message[fr]",
     "customFormat": "Custom format[fr]",
     "customValidationInput": "With custom validation[fr]",
     "customStyleInput": "Custom style[fr]",
+    "dailySynchro": "Select the sections that should be in the daily synchro",
     "dateOfBirth": "Date of birth[fr]",
     "datePicker": "Date picker[fr]",
     "dateRange": "Date range[fr]",
     "dateTimePicker": "Datetime picker[fr]",
     "daysInput": "Days input",
     "debouncedTypeahead": "With debounce time prop",
+    "deliverableList": "A list of your daily deliverables",
     "disabledMultiSelect": "Disabled multiselect[fr]",
     "disabled": "Disabled[fr]",
     "disableWeekDays": "Disable week days[fr]",
@@ -67,6 +73,7 @@
     "expiresAfter": "Expires after",
     "female": "Female",
     "gender": "Gender",
+    "generalQuestions": "General questions",
     "iconSlot": "Icon slot",
     "input": "Input[fr]",
     "inputWithType": "With type prop[fr]",
@@ -80,9 +87,12 @@
     "monthAndYearPicker": "Month and year picker[fr]",
     "monthPicker": "Month picker[fr]",
     "multiCalendars": "Multicalendar[fr]",
+    "multiCheckbox": "Multiple checkbox input",
     "multiSelect": "Multiselect[fr]",
+    "next": "Next",
     "number": "Number[fr]",
     "one": "One",
+    "other": "Other",
     "password": "Password[fr]",
     "pickupDate": "Pickup date[fr]",
     "presentationDate": "Presentation date[fr]",
@@ -90,7 +100,9 @@
     "reportDate": "Report date[fr]",
     "size": "Size",
     "select": "Select[fr]",
+    "solutions": "Solutions",
     "submit": "Submit",
+    "summary": "Summary",
     "switch": "Switch[fr]",
     "textarea": "Textarea[fr]",
     "textInput": "Text input[fr]",
@@ -104,6 +116,7 @@
     "valid": "Show valid state[fr]",
     "vehicle": "Vehicle",
     "withI18n": "With i18n[fr]",
+    "workInProgress": "Work in progress",
     "year": "Year[fr]",
     "yearPicker": "Year picke[fr]"
   },
diff --git a/apps/demo/src/router/form.ts b/apps/demo/src/router/form.ts
index 10c625313..fc878c90b 100644
--- a/apps/demo/src/router/form.ts
+++ b/apps/demo/src/router/form.ts
@@ -1,3 +1,4 @@
+const CheckboxInput = () => import("@/views/Form/checkboxInput/Index.vue");
 const DatePicker = () => import("@/views/Form/datePicker/Index.vue");
 const DaysInput = () => import("@/views/Form/daysInput/Index.vue");
 const EditableContent = () => import("@/views/Form/editableContent/Index.vue");
@@ -17,6 +18,11 @@ const routes = [
   {
     path: "/form",
     children: [
+      {
+        component: CheckboxInput,
+        name: "checkboxInput",
+        path: "checkbox-input",
+      },
       {
         component: DatePicker,
         name: "datePicker",
diff --git a/apps/demo/src/views/Form/FormPage.vue b/apps/demo/src/views/Form/FormPage.vue
index 057a0ae08..1ee9bd811 100644
--- a/apps/demo/src/views/Form/FormPage.vue
+++ b/apps/demo/src/views/Form/FormPage.vue
@@ -41,6 +41,10 @@ const menu = [
     name: "Get started",
     routeName: "",
   },
+  {
+    name: "Checkbox input",
+    routeName: "checkboxInput",
+  },
   {
     name: "Date picker",
     routeName: "datePicker",
diff --git a/apps/demo/src/views/Form/checkboxInput/Index.vue b/apps/demo/src/views/Form/checkboxInput/Index.vue
new file mode 100644
index 000000000..2286e0315
--- /dev/null
+++ b/apps/demo/src/views/Form/checkboxInput/Index.vue
@@ -0,0 +1,314 @@
+<template>
+  <FormPage :title="$t('form.label.checkbox')" class="demo">
+    <template #toolbar>
+      <router-link :to="{ name: 'form' }" class="back">
+        {{ $t("common.back") }}
+      </router-link>
+    </template>
+
+    <section>
+      <h2>{{ $t("form.label.basicInput") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+         <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;CheckboxInput
+              v-model:checked="input"
+              :input-label="Accept"
+              name="input"
+            /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { CheckboxInput } from "@dzangolab/vue3-form";
+          import { ref } from "vue";
+
+          const input = ref();
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <CheckboxInput
+          v-model:checked="formData.noLabelInput"
+          :input-label="$t('form.label.accept')"
+          name="basic"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("form.label.multiCheckbox") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+         <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;CheckboxInput
+              v-model="input"
+              :options="vehicleOptions"
+              label="Vehicle"
+              name="checkbox"
+            /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { CheckboxInput } from "@dzangolab/vue3-form";
+          import { ref } from "vue";
+
+          const input = ref();
+          const vehicleOptions = [
+            {
+              label: "Bike",
+              value: "bike",
+            },
+            {
+              label: "Car",
+              value: "car",
+            },
+            {
+              label: "Truck",
+              value: "truck",
+            },
+          ];
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <CheckboxInput
+          v-model="formData.multiCheckbox"
+          :label="$t('form.label.vehicle')"
+          :options="vehicleOptions"
+          name="multi-checkbox"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("form.label.disabled") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+         <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;CheckboxInput
+              v-model="input"
+              :options="vehicleOptions"
+              direction="horizontal"
+              disabled
+              label="Vehicle"
+              name="checkbox"
+            /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { CheckboxInput } from "@dzangolab/vue3-form";
+          import { ref } from "vue";
+
+          const input = ref(["car"]);
+          const vehicleOptions = [
+            {
+              label: "Bike",
+              value: "bike",
+            },
+            {
+              label: "Car",
+              value: "car",
+            },
+            {
+              label: "Truck",
+              value: "truck",
+            },
+          ];
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <CheckboxInput
+          v-model="formData.disabled"
+          :label="$t('form.label.vehicle')"
+          :options="vehicleOptions"
+          direction="horizontal"
+          disabled
+          name="disabled-checkbox"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("form.label.inputWithValidation") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+         <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;Form&gt;
+              &lt;CheckboxInput
+                v-model="input"
+                :label="t('form.label.dailySynchro')"
+                :options="dailySynchroOptions"
+                :schema="inputSchema"
+                name="checkbox"
+              /&gt;
+            &lt;/Form&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { Form, CheckboxInput } from "@dzangolab/vue3-form";
+          import { useI18n } from "@dzangolab/vue3-i18n";
+          import { ref } from "vue";
+
+          const { t } = useI18n();
+
+          const inputSchema = z
+            .string()
+            .array()
+            .min(6, { message: t("form.errors.checkbox.min", { min: 6 }) });
+
+          const input = ref();
+          const dailySynchroOptions = [
+            {
+              label: t("form.label.title"),
+              value: 1,
+            },
+            {
+              label: t("form.label.solutions"),
+              value: 2,
+            },
+            {
+              label: t("form.label.deliverableList"),
+              value: 3,
+            },
+            {
+              label: t("form.label.workInProgress"),
+              value: 4,
+            },
+            {
+              label: t("form.label.summary"),
+              value: 5,
+            },
+            {
+              label: t("form.label.next"),
+              value: 6,
+            },
+            {
+              label: t("form.label.assumptions"),
+              value: 7,
+            },
+            {
+              label: t("form.label.generalQuestions"),
+              value: 8,
+            },
+            {
+              label: t("form.label.consequences"),
+              value: 9,
+            },
+            {
+              label: t("form.label.other"),
+              value: 10,
+            },
+          ];
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <Form>
+          <CheckboxInput
+            v-model="formData.inputWithValidation"
+            :label="$t('form.label.dailySynchro')"
+            :options="dailySynchroOptions"
+            :schema="inputSchema"
+            name="daily-synchro"
+          />
+        </Form>
+      </div>
+    </section>
+  </FormPage>
+</template>
+
+<script lang="ts">
+export default {
+  name: "CheckboxInput",
+};
+</script>
+
+<script setup lang="ts">
+import { Form, CheckboxInput } from "@dzangolab/vue3-form";
+import { useI18n } from "@dzangolab/vue3-i18n";
+import { reactive, ref } from "vue";
+import { z } from "zod";
+
+import FormPage from "../FormPage.vue";
+
+const { t } = useI18n();
+
+const inputSchema = z
+  .string()
+  .array()
+  .min(6, { message: t("form.errors.checkbox.min", { min: 6 }) });
+
+let formData = reactive({
+  disabled: ref(["car"]),
+  inputWithValidation: ref(),
+  multiCheckbox: ref<string[]>([]),
+  noLabelInput: ref(),
+});
+
+const dailySynchroOptions = [
+  {
+    label: t("form.label.title"),
+    value: 1,
+  },
+  {
+    label: t("form.label.solutions"),
+    value: 2,
+  },
+  {
+    label: t("form.label.deliverableList"),
+    value: 3,
+  },
+  {
+    label: t("form.label.workInProgress"),
+    value: 4,
+  },
+  {
+    label: t("form.label.summary"),
+    value: 5,
+  },
+  {
+    label: t("form.label.next"),
+    value: 6,
+  },
+  {
+    label: t("form.label.assumptions"),
+    value: 7,
+  },
+  {
+    label: t("form.label.generalQuestions"),
+    value: 8,
+  },
+  {
+    label: t("form.label.consequences"),
+    value: 9,
+  },
+  {
+    label: t("form.label.other"),
+    value: 10,
+  },
+];
+
+const vehicleOptions = [
+  {
+    label: t("form.label.bike"),
+    value: "bike",
+  },
+  {
+    label: t("form.label.car"),
+    value: "car",
+  },
+  {
+    label: t("form.label.truck"),
+    value: "truck",
+  },
+];
+</script>
diff --git a/packages/vue-form/src/assets/css/input.css b/packages/vue-form/src/assets/css/input.css
index f657ce1ba..9f7f94dfb 100644
--- a/packages/vue-form/src/assets/css/input.css
+++ b/packages/vue-form/src/assets/css/input.css
@@ -24,6 +24,10 @@
   width: 100%;
 }
 
+.field input:disabled {
+  cursor: default;
+}
+
 .field input[type="radio"] {
   height: fit-content;
 }
@@ -42,3 +46,11 @@
 .field textarea:disabled {
   resize: none;
 }
+
+.field.checkbox input[type=checkbox] {
+  height: fit-content;
+  margin-right: .5em;
+  width: auto;
+  cursor: pointer;
+  accent-color: #007aff;
+}
diff --git a/packages/vue-form/src/components/Checkbox.vue b/packages/vue-form/src/components/Checkbox.vue
new file mode 100644
index 000000000..5c6dd1968
--- /dev/null
+++ b/packages/vue-form/src/components/Checkbox.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="checkbox-wrapper">
+    <input
+      :id="name"
+      :checked="modelValue"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      type="checkbox"
+      @change="onChange"
+    />
+    <label v-if="label" :for="name">{{ label }}</label>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "CheckboxElement",
+};
+</script>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+
+defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  label: {
+    default: undefined,
+    required: false,
+    type: String as PropType<string | null | undefined>,
+  },
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: "checkbox",
+    required: false,
+    type: String as PropType<string>,
+  },
+  value: {
+    default: undefined,
+    required: false,
+    type: [String, Number, Boolean] as PropType<string | number | boolean>,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const onChange = (event: Event) => {
+  const value = (event.target as HTMLInputElement).checked;
+
+  emit("update:modelValue", Boolean(value));
+};
+</script>
+
+<style lang="css">
+.checkbox-wrapper > input[type="checkbox"] {
+  transform: scale(1.5);
+  accent-color: var(--field-background-color, #007aff);
+}
+
+.checkbox-wrapper > input[type="checkbox"]:disabled {
+  cursor: default;
+}
+
+.checkbox-wrapper > input[type="checkbox"]:focus,
+.checkbox-wrapper > input[type="checkbox"]:focus-visible {
+  box-shadow: none;
+}
+</style>
diff --git a/packages/vue-form/src/components/CheckboxInput.vue b/packages/vue-form/src/components/CheckboxInput.vue
new file mode 100644
index 000000000..3ba4f26ae
--- /dev/null
+++ b/packages/vue-form/src/components/CheckboxInput.vue
@@ -0,0 +1,153 @@
+<template>
+  <div :class="`field checkbox ${name}`">
+    <label v-if="label" :for="name">{{ label }}</label>
+    <Field
+      v-slot="{ field, meta }"
+      :name="name"
+      :model-value="hasOptions ? modelValue : checked"
+      :rules="fieldSchema"
+      @change="handleChange"
+    >
+      <div v-if="hasOptions" :class="`checkbox-group direction-${direction}`">
+        <span
+          v-for="(option, index) in options"
+          :key="`${index}-${option.value}`"
+        >
+          <Checkbox
+            v-bind="field"
+            :id="`input-field-${name}-${index}`"
+            :class="{ invalid: meta.touched && !meta.valid }"
+            :disabled="disabled"
+            :label="option.label"
+            :model-value="isOptionChecked(option.value)"
+            :name="`${name}-${option.label}`"
+            :value="option.value"
+            tabindex="0"
+          />
+        </span>
+      </div>
+      <div v-else class="single-checkbox">
+        <Checkbox
+          v-bind="field"
+          :id="`input-field-${name}`"
+          :class="{ invalid: meta.touched && !meta.valid }"
+          :disabled="disabled"
+          :label="inputLabel"
+          :model-value="checked"
+          :name="name"
+          tabindex="0"
+        />
+      </div>
+    </Field>
+
+    <ErrorMessage :name="name" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toFieldValidator } from "@vee-validate/zod";
+import { ErrorMessage, Field } from "vee-validate";
+import { z } from "zod";
+
+import Checkbox from "./Checkbox.vue";
+
+import type { InputOption } from "../types";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  checked: {
+    default: false,
+    type: Boolean,
+  },
+  direction: {
+    default: undefined,
+    type: String,
+    validator: (value: string) => ["vertical", "horizontal"].includes(value),
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  inputLabel: {
+    default: undefined,
+    type: String as PropType<string>,
+  },
+  label: {
+    default: "",
+    required: false,
+    type: String as PropType<string>,
+  },
+  modelValue: {
+    default: () => [] as string[] | number[],
+    type: Array as PropType<string[] | number[]>,
+  },
+  name: {
+    default: "checkbox",
+    required: false,
+    type: String as PropType<string>,
+  },
+  options: {
+    default: () => [] as string[] | number[],
+    type: Array as PropType<InputOption[]>,
+  },
+  schema: {
+    default: () => {
+      return {};
+    },
+    required: false,
+    type: Object as PropType<z.ZodType<string | number | boolean>>,
+  },
+});
+
+const emit = defineEmits(["update:checked", "update:modelValue"]);
+
+const fieldSchema = Object.keys(props.schema).length
+  ? toFieldValidator(props.schema)
+  : null;
+
+const hasOptions = Array.isArray(props.options) && props.options.length > 0;
+
+const isOptionChecked = (value: string | number) => {
+  return (
+    Array.isArray(props.modelValue) &&
+    (props.modelValue as (string | number)[]).includes(value)
+  );
+};
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const isChecked = target.checked;
+  const value = target.value;
+  let updatedValues = [...(props.modelValue as (string | number)[])];
+
+  if (hasOptions) {
+    if (isChecked) {
+      updatedValues.push(value);
+    } else {
+      updatedValues = updatedValues.filter((item) => item !== value);
+    }
+
+    emit("update:modelValue", updatedValues);
+  } else {
+    emit("update:checked", isChecked);
+  }
+};
+</script>
+
+<style lang="css">
+.field.checkbox > label {
+  font-size: var(--form-label-font-size, 1em);
+  margin-bottom: 0.75rem;
+}
+
+.field.checkbox > .checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field.checkbox > .checkbox-group.direction-horizontal {
+  flex-direction: row;
+  gap: 1.5rem;
+}
+</style>
diff --git a/packages/vue-form/src/components/index.ts b/packages/vue-form/src/components/index.ts
index ded91afa4..d06d87194 100644
--- a/packages/vue-form/src/components/index.ts
+++ b/packages/vue-form/src/components/index.ts
@@ -1,6 +1,8 @@
-export { default as EditableContent } from "./EditableContent.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as CheckboxInput } from "./CheckboxInput.vue";
 export { default as DatePicker } from "./DatePicker.vue";
 export { default as DaysInput } from "./DaysInput.vue";
+export { default as EditableContent } from "./EditableContent.vue";
 export { default as Email } from "./Email.vue";
 export { default as Form } from "./Form.vue";
 export { default as FormActions } from "./FormActions.vue";