diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 1e639c15..457f801e 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -1,17 +1,20 @@
 <script setup>
 import FwbCheckboxExample from './checkbox/examples/FwbCheckboxExample.vue'
-import FwbCheckboxExampleChecked from './checkbox/examples/FwbCheckboxExampleChecked.vue'
 import FwbCheckboxExampleDisabled from './checkbox/examples/FwbCheckboxExampleDisabled.vue'
+import FwbCheckboxExampleGroup from './checkbox/examples/FwbCheckboxExampleGroup.vue'
+import FwbCheckboxExampleHelper from './checkbox/examples/FwbCheckboxExampleHelper.vue'
 import FwbCheckboxExampleLink from './checkbox/examples/FwbCheckboxExampleLink.vue'
 </script>
+
 # Vue Checkbox - Flowbite
 
-## Default checkbox
+## Checkbox example
 
 <fwb-checkbox-example />
 ```vue
 <template>
   <fwb-checkbox v-model="check" label="Default checkbox" />
+  <fwb-checkbox v-model="checked" label="Checked state" />
 </template>
 
 <script setup>
@@ -19,10 +22,11 @@ import { ref } from 'vue'
 import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
+const checked = ref(true)
 </script>
 ```
 
-## Disabled checkbox
+## Disabled state
 
 <fwb-checkbox-example-disabled />
 ```vue
@@ -38,38 +42,114 @@ const check = ref(false)
 </script>
 ```
 
-## Checked checkbox
+## Checkbox with link
 
-<fwb-checkbox-example-checked />
+<fwb-checkbox-example-link />
 ```vue
 <template>
-  <fwb-checkbox v-model="check" label="Checked checkbox" />
+  <fwb-checkbox v-model="check">
+    I agree with the
+    <fwb-a class="text-blue-600 hover:underline" href="#">
+      terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { FwbCheckbox } from 'flowbite-vue'
+import { FwbA, FwbCheckbox } from 'flowbite-vue'
 
-const check = ref(true)
+const check = ref(false)
 </script>
 ```
 
-## Link with checkbox
+## Checkbox with helper text
 
-<fwb-checkbox-example-link />
+<fwb-checkbox-example-helper />
 ```vue
 <template>
-  <fwb-checkbox v-model="check">
-    <fwb-a href="#">
-      I agree with the terms and conditions.
-    </fwb-a>
+  <fwb-checkbox v-model="check" label="Free shipping via Flowbite">
+    <template #helper>
+      For orders shipped from $25 in books or $29 in other categories.
+    </template>
   </fwb-checkbox>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { FwbA, FwbCheckbox } from 'flowbite-vue'
+import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
 </script>
 ```
+
+
+## Checkbox group
+
+When using the checkbox with `arrays` or `objects`, the selected values will be stored in the array referenced by v-model
+
+<fwb-checkbox-example-group />
+
+```vue
+<template>
+  <div class="space-y-2">
+    <fwb-checkbox
+      v-for="(fruit, i) in fruits"
+      :key="i"
+      v-model="selectedFruits"
+      :label="fruit"
+      :value="fruit"
+      name="fruits"
+    />
+    <p class="mb-4 text-sm text-gray-500">
+      Selected fruits: {{ selectedFruits }}
+    </p>
+    <fwb-checkbox
+      v-for="(name, id) in planets"
+      :key="id"
+      v-model="selectedPlanets"
+      :label="name"
+      :value="id"
+      name="planets"
+    />
+    <p class="text-sm text-gray-500">
+      Selected planets: {{ selectedPlanets }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const selectedFruits = ref(['Banana', 'Strawberry'])
+const fruits = [
+  'Apple',
+  'Banana',
+  'Orange',
+  'Strawberry'
+  ]
+
+const selectedPlanets = ref([3])
+const planets = {
+  1: 'Mercury',
+  2: 'Venus',
+  3: 'Earth',
+  4: 'Mars',
+  5: 'Jupiter',
+  6: 'Saturn',
+  7: 'Uranus',
+  8: 'Neptune',
+}
+</script>
+
+```
+
+## Checkbox component API
+
+### FwbCheckbox Props
+| Name         | Type             | Default | Description                     |
+| ------------ | ---------------- | ------- | ------------------------------- |
+| wrapperClass | String \| Object | `''`    | Added to main component wrapper |
+| labelClass   | String \| Object | `''`    | Added to `<label>` element.     |
+| class        | String \| Object | `''`    | Added to `<input>` element.     |
diff --git a/docs/components/checkbox/examples/FwbCheckboxExample.vue b/docs/components/checkbox/examples/FwbCheckboxExample.vue
index 7ba50370..321d689f 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExample.vue
+++ b/docs/components/checkbox/examples/FwbCheckboxExample.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="vp-raw">
+  <div class="flex flex-col gap-2 vp-raw">
     <fwb-checkbox
       v-model="check"
       label="Default checkbox"
     />
+    <fwb-checkbox
+      v-model="checked"
+      label="Checked state"
+    />
   </div>
 </template>
 
@@ -13,4 +17,5 @@ import { ref } from 'vue'
 import { FwbCheckbox } from '../../../../src/index'
 
 const check = ref(false)
+const checked = ref(true)
 </script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue b/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
index 4cb686a4..e3db4f6c 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="vp-raw">
+  <div class="flex flex-col gap-2 vp-raw">
     <fwb-checkbox
       v-model="check"
       disabled
       label="Disabled checkbox"
     />
+    <fwb-checkbox
+      v-model="checked"
+      disabled
+      label="Disabled checked"
+    />
   </div>
 </template>
 
@@ -14,4 +19,5 @@ import { ref } from 'vue'
 import { FwbCheckbox } from '../../../../src/index'
 
 const check = ref(false)
+const checked = ref(true)
 </script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
new file mode 100644
index 00000000..1a7cd78b
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="vp-raw">
+    <div class="space-y-2">
+      <fwb-checkbox
+        v-for="(fruit, i) in fruits"
+        :key="i"
+        v-model="selectedFruits"
+        :label="fruit"
+        :value="fruit"
+        name="fruits"
+      />
+      <p class="mb-4 text-gray-500 text-sm">
+        Selected fruits: {{ selectedFruits }}
+      </p>
+      <fwb-checkbox
+        v-for="(name, id) in planets"
+        :key="id"
+        v-model="selectedPlanets"
+        :label="name"
+        :value="id"
+        name="planets"
+      />
+      <p class="text-gray-500 text-sm">
+        Selected planets: {{ selectedPlanets }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { FwbCheckbox } from '../../../../src/index'
+
+const selectedFruits = ref(['Banana', 'Strawberry'])
+const fruits = [
+  'Apple',
+  'Banana',
+  'Orange',
+  'Strawberry',
+]
+
+const selectedPlanets = ref(['3'])
+const planets = {
+  1: 'Mercury',
+  2: 'Venus',
+  3: 'Earth',
+  4: 'Mars',
+  5: 'Jupiter',
+  6: 'Saturn',
+  7: 'Uranus',
+  8: 'Neptune',
+}
+</script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue b/docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue
new file mode 100644
index 00000000..cbfc04e4
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw">
+    <fwb-checkbox
+      v-model="check"
+      label="Free shipping via Flowbite"
+    >
+      <template #helper>
+        For orders shipped from $25 in books or $29 in other categories.
+      </template>
+    </fwb-checkbox>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { FwbCheckbox } from '../../../../src/index'
+
+const check = ref(false)
+</script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue b/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
index 5766633f..1846d2d4 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
@@ -1,9 +1,15 @@
 <template>
-  <fwb-checkbox v-model="check">
-    <fwb-a href="#">
-      I agree with the terms and conditions.
-    </fwb-a>
-  </fwb-checkbox>
+  <div class="vp-raw">
+    <fwb-checkbox v-model="check">
+      I agree with the
+      <fwb-a
+        class="text-blue-600 hover:underline"
+        href="#"
+      >
+        terms and conditions.
+      </fwb-a>
+    </fwb-checkbox>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/FwbCheckbox/FwbCheckbox.vue b/src/components/FwbCheckbox/FwbCheckbox.vue
index 3bb7c045..97e5a0ac 100644
--- a/src/components/FwbCheckbox/FwbCheckbox.vue
+++ b/src/components/FwbCheckbox/FwbCheckbox.vue
@@ -1,47 +1,66 @@
 <template>
-  <label class="flex items-center justify-start gap-3">
-    <input
-      v-model="model"
-      :class="checkboxClasses"
-      :disabled="disabled"
-      type="checkbox"
+  <div :class="wrapperClass">
+    <label class="flex justify-start items-center">
+      <input
+        v-model="model"
+        :class="checkboxClass"
+        :disabled="disabled"
+        :name="name"
+        :value="value"
+        type="checkbox"
+      >
+      <span
+        v-if="label"
+        :class="labelClass"
+      >
+        {{ label }}
+      </span>
+      <span :class="labelClass">
+        <slot />
+      </span>
+    </label>
+    <p
+      v-if="$slots.helper"
+      :class="helperMessageClass"
     >
-    <span
-      v-if="label"
-      :class="labelClasses"
-    >{{ label }}</span>
-    <slot />
-  </label>
+      <slot name="helper" />
+    </p>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { toRefs } from 'vue'
 
 import { useCheckboxClasses } from './composables/useCheckboxClasses'
 
 interface CheckboxProps {
+  class?: string | Record<string, boolean>
   disabled?: boolean
   label?: string
-  modelValue?: boolean
+  labelClass?: string | Record<string, boolean>
+  name?: string
+  value?: string | number | boolean | object
+  wrapperClass?: string | Record<string, boolean>
 }
+
 const props = withDefaults(defineProps<CheckboxProps>(), {
+  class: '',
   disabled: false,
   label: '',
-  modelValue: false,
+  labelClass: '',
+  name: undefined,
+  value: undefined,
+  wrapperClass: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
-const model = computed({
-  get () {
-    return props.modelValue
-  },
-  set (val) {
-    emit('update:modelValue', val)
-  },
+const model = defineModel<boolean | (string | number | boolean | object)[]>({
+  default: false,
 })
 
 const {
-  checkboxClasses,
-  labelClasses,
-} = useCheckboxClasses()
+  checkboxClass,
+  helperMessageClass,
+  labelClass,
+  wrapperClass,
+} = useCheckboxClasses(toRefs(props))
 </script>
diff --git a/src/components/FwbCheckbox/composables/useCheckboxClasses.ts b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
index 71f8140f..27468527 100644
--- a/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
+++ b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
@@ -1,19 +1,49 @@
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
 
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
-// LABEL
-const defaultLabelClasses = 'block text-sm font-medium text-gray-900 dark:text-gray-300'
+const defaultLabelClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300 mr-1'
+const defaultCheckboxClasses = 'mr-2 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+const defaultHelperClasses = 'ml-6 text-xs font-normal text-gray-500 dark:text-gray-300'
 
-// CHECKBOX
-const defaultCheckboxClasses = 'w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500'
+const disabledLabelClasses = 'text-gray-400 dark:text-gray-500'
 
-export function useCheckboxClasses () {
-  const checkboxClasses = computed(() => simplifyTailwindClasses(defaultCheckboxClasses))
-  const labelClasses = computed(() => defaultLabelClasses)
+export type UseCheckboxClassesProps = {
+  class: Ref<string | Record<string, boolean>>
+  disabled: Ref<boolean>
+  labelClass: Ref<string | Record<string, boolean>>
+  wrapperClass: Ref<string | Record<string, boolean>>
+}
+
+export function useCheckboxClasses (props: UseCheckboxClassesProps): {
+  checkboxClass: Ref<string>
+  labelClass: Ref<string>
+  helperMessageClass: Ref<string>
+  wrapperClass: Ref<string>
+} {
+  const labelClass = computed(() => useMergeClasses([
+    defaultLabelClasses,
+    props.disabled.value ? disabledLabelClasses : '',
+    props.labelClass.value,
+  ]))
+
+  const checkboxClass = computed(() => useMergeClasses([
+    defaultCheckboxClasses,
+    props.class.value,
+  ]))
+
+  const helperMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+  ]))
+
+  const wrapperClass = computed(() => useMergeClasses([
+    props.wrapperClass.value,
+  ]))
 
   return {
-    checkboxClasses,
-    labelClasses,
+    checkboxClass,
+    helperMessageClass,
+    labelClass,
+    wrapperClass,
   }
 }