diff --git a/src/docs/data/checkbox.ts b/src/docs/data/checkbox.ts
new file mode 100644
index 0000000..2a6ec12
--- /dev/null
+++ b/src/docs/data/checkbox.ts
@@ -0,0 +1,32 @@
+export const checkboxDefault = `
+import { Checkbox } from 'kampsy-ui';
+let value = $state(false);
+
+<Checkbox bind:checked>option 1</Checkbox>`;
+
+export const checkboxDisabled = `
+import { Checkbox } from 'kampsy-ui';
+
+<div class="w-full space-y-4">
+    <Checkbox disabled>Disabled</Checkbox>
+    <Checkbox checked disabled>Disabled Checked</Checkbox>
+    <Checkbox disabled indeterminate>Disabled Indeterminate</Checkbox>
+</div>`;
+
+
+export const checkboxIndeterminate = `
+import { Checkbox } from 'kampsy-ui';
+
+<Checkbox indeterminate>option 1</Checkbox>`;
+
+export const checkboxItems = `
+import { Checkbox } from 'kampsy-ui';
+
+let items = $state(['avatar', 'choicebox']);
+
+<div class="w-full space-y-4">
+    <Checkbox value="avatar" bind:items>avatar</Checkbox>
+    <Checkbox value="button" bind:items>button</Checkbox>
+    <Checkbox value="calendar" bind:items>calendar</Checkbox>
+    <Checkbox value="choicebox" bind:items>choicebox</Checkbox>
+</div>`;
\ No newline at end of file
diff --git a/src/docs/utils/data.ts b/src/docs/utils/data.ts
index 8ec7318..d27b9b6 100644
--- a/src/docs/utils/data.ts
+++ b/src/docs/utils/data.ts
@@ -45,10 +45,14 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'calendar',
-                url: '/calendar',
+                url: '/calendar'
+            },
+            {
+                name: 'checkbox',
+                url: '/checkbox',
                 badge: {
-                    name: 'updated',
-                    variant: 'purple'
+                    name: 'new',
+                    variant: 'green'
                 }
             },
             {
@@ -69,11 +73,7 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'input',
-                url: '/input',
-                badge: {
-                    name: 'updated',
-                    variant: 'purple'
-                }
+                url: '/input'
             },
             {
                 name: 'menu',
@@ -81,11 +81,7 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'modal',
-                url: '/modal',
-                badge: {
-                    name: 'new',
-                    variant: 'green'
-                }
+                url: '/modal'
             },
             {
                 name: 'note',
@@ -133,19 +129,11 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'text',
-                url: '/text',
-                badge: {
-                    name: 'new',
-                    variant: 'green'
-                }
+                url: '/text'
             },
             {
                 name: 'textarea',
-                url: '/textarea',
-                badge: {
-                    name: 'updated',
-                    variant: 'purple'
-                }
+                url: '/textarea'
             },
             {
                 name: 'theme switcher',
diff --git a/src/lib/checkbox/checkbox.svelte b/src/lib/checkbox/checkbox.svelte
new file mode 100644
index 0000000..8d944ec
--- /dev/null
+++ b/src/lib/checkbox/checkbox.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+	import Check from '$lib/icons/check.svelte';
+	import Minus from '$lib/icons/minus.svelte';
+	import { randomString } from '$lib/utils/random.js';
+	import type { Snippet } from 'svelte';
+
+	type propT = {
+		checked?: boolean | undefined;
+		value?: string | undefined;
+		items?: Array<string> | undefined;
+		indeterminate?: boolean | undefined;
+		disabled?: boolean | undefined;
+		children?: Snippet;
+	};
+	let {
+		checked = $bindable(false),
+		value = undefined,
+		items = $bindable(undefined),
+		indeterminate = false,
+		disabled = false,
+		children
+	}: propT = $props();
+
+	// random string for unique id
+	const unique = `${randomString(4)}_${value}`;
+
+	const onchange = () => {
+		checked = !checked;
+		// if checked is true add the value to the item
+		if (items && value) {
+			if (checked) {
+				items = [...items, value];
+			} else {
+				items = items.filter((item) => item !== value);
+			}
+		}
+	};
+
+	$effect(() => {
+		if (items && value) {
+			if (items.includes(value)) {
+				checked = true;
+			}
+		}
+	});
+
+	// The rounded radio cont
+	let checkboxContClass = $derived.by(() => {
+		if (disabled) {
+			if (indeterminate) {
+				return `border-kui-light-gray-600 dark:border-kui-dark-gray-600 text-kui-light-gray-600 dark:text-kui-dark-gray-600
+				bg-kui-light-gray-100 dark:bg-kui-dark-gray-100`;
+			}
+
+			// will check for indeterminate and checked
+			if (checked) {
+				return `border-kui-light-gray-600 dark:border-kui-dark-gray-600 bg-kui-light-gray-600 dark:bg-kui-dark-gray-600`;
+			}
+			return `border-kui-light-gray-500 dark:border-kui-dark-gray-500 bg-kui-light-gray-100 dark:bg-kui-dark-gray-100`;
+		}
+		// if its indeterminate
+		if (indeterminate) {
+			return `border-kui-light-gray-900 dark:border-kui-dark-gray-900`;
+		}
+
+		// If checked is true
+		if (checked) {
+			return `border-kui-dark-bg-secondary  dark:border-kui-light-bg bg-kui-dark-bg-secondary  dark:bg-kui-light-bg `;
+		}
+		return `border-kui-light-gray-500 dark:border-kui-dark-gray-500 hover:bg-kui-light-gray-100 dark:hover:bg-kui-dark-gray-100`;
+	});
+
+	let checkboxClass = $derived.by(() => {
+		if (indeterminate) {
+			return `text-kui-light-gray-900 dark:text-kui-dark-gray-900`;
+		}
+		if (checked) {
+			return `text-kui-light-bg dark:text-kui-black`;
+		}
+		return `text-transparent`;
+	});
+
+	let textClass = $derived.by(() => {
+		if (disabled) {
+			return `text-kui-light-gray-500 dark:text-kui-dark-gray-500`;
+		}
+		return `text-kui-light-gray-900 dark:text-kui-dark-gray-900`;
+	});
+</script>
+
+<section class="flex">
+	<label for={unique}>
+		<div class="flex items-center gap-2 cursor-pointer">
+			<div
+				class="w-[16px] h-[16px] rounded-[4px] p-[2px] box-border transition-colors ease-in flex items-center justify-center border {checkboxContClass} "
+			>
+				<input
+					{onchange}
+					type="checkbox"
+					{checked}
+					id={unique}
+					{value}
+					{disabled}
+					{indeterminate}
+					class="hidden"
+				/>
+				<div class="w-[16px] h-[16px] font-bold transition-colors ease-in {checkboxClass}">
+					{#if indeterminate}
+						<Minus />
+					{:else}
+						<Check />
+					{/if}
+				</div>
+			</div>
+
+			{#if children}
+				<div class="text-sm select-none first-letter:capitalize {textClass}">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	</label>
+</section>
diff --git a/src/lib/icons/check-square-fill.svelte b/src/lib/icons/check-square-fill.svelte
new file mode 100644
index 0000000..2ebaa09
--- /dev/null
+++ b/src/lib/icons/check-square-fill.svelte
@@ -0,0 +1,14 @@
+<svg
+	data-testid="geist-icon"
+	height="100%"
+	stroke-linejoin="round"
+	viewBox="0 0 16 16"
+	width="100%"
+	style="color: currentcolor;"
+	><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M14.5 1.5V14.5L1.5 14.5L1.5 1.5H14.5ZM16 15C16 15.5523 15.5523 16 15 16L1 16C0.447715 16 0 15.5523 0 15V1C0 0.447715 0.447716 0 1 0H15C15.5523 0 16 0.447715 16 1V15ZM11.7803 6.28033L12.3107 5.75L11.25 4.68934L10.7197 5.21967L6.5 9.43935L5.28033 8.21967L4.75001 7.68934L3.68934 8.74999L4.21967 9.28033L5.96967 11.0303C6.11032 11.171 6.30109 11.25 6.5 11.25C6.69891 11.25 6.88968 11.171 7.03033 11.0303L11.7803 6.28033Z"
+		fill="currentColor"
+	></path></svg
+>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 47afc13..55f9990 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -24,6 +24,7 @@ export { default as GridSquare } from './grid-square.svelte'
 export { default as ListUnordered } from './list-unordered.svelte'
 export { default as Check } from './check.svelte'
 export { default as CheckSquare } from './check-square.svelte'
+export { default as CheckSquareFill } from './check-square-fill.svelte'
 export { default as Hook } from './hook.svelte'
 export { default as Webhook } from './webhook.svelte'
 export { default as InformationFillSmall } from './information-fill-small.svelte'
@@ -51,4 +52,5 @@ export { default as Accessibility } from './accessibility.svelte'
 export { default as MenuAlt } from './menu-alt.svelte'
 export { default as Cross } from './cross.svelte'
 export { default as Star } from './star.svelte'
-export { default as StarFill } from './star-fill.svelte'
\ No newline at end of file
+export { default as StarFill } from './star-fill.svelte'
+export { default as Minus } from './minus.svelte'
\ No newline at end of file
diff --git a/src/lib/icons/minus.svelte b/src/lib/icons/minus.svelte
new file mode 100644
index 0000000..55fe37d
--- /dev/null
+++ b/src/lib/icons/minus.svelte
@@ -0,0 +1,14 @@
+<svg
+	data-testid="geist-icon"
+	height="100%"
+	stroke-linejoin="round"
+	viewBox="0 0 16 16"
+	width="100%"
+	style="color: currentcolor;"
+	><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M2 7.25H2.75H13.25H14V8.75H13.25H2.75H2V7.25Z"
+		fill="currentColor"
+	></path></svg
+>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 7856c05..279a465 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -15,6 +15,9 @@ export { default as Button } from './button/button.svelte';
 // Calendar
 export { default as Calendar } from './calendar/calendar.svelte'
 
+// Checkbox
+export {default as Checkbox} from './checkbox/checkbox.svelte'
+
 // Choicebox
 export * as Choicebox from './choicebox/index.js'
 
diff --git a/src/routes/checkbox/+page.svelte b/src/routes/checkbox/+page.svelte
new file mode 100644
index 0000000..93b97b1
--- /dev/null
+++ b/src/routes/checkbox/+page.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import Aside from '$lib/../docs/ui/aside.svelte';
+	import Row from '$lib/../docs/ui/row.svelte';
+	import Shell from '$lib/../docs/ui/shell.svelte';
+	import { asideData } from '$lib/../docs/utils/data.js';
+	import CollapseCode from '$lib/collapse/collapseCode.svelte';
+	import type { Snippet } from 'svelte';
+	import Pagination from '$lib/pagination/pagination.svelte';
+	import { Checkbox } from '$lib/index.js';
+	import {
+		checkboxDefault,
+		checkboxDisabled,
+		checkboxIndeterminate,
+
+		checkboxItems
+
+	} from '../../docs/data/checkbox.js';
+
+	let checked = $state(false);
+
+	let items = $state(['avatar', 'choicebox']);
+</script>
+
+<svelte:head>
+	<title>Checkbox</title>
+</svelte:head>
+
+{#snippet checkbox()}
+	<Row>
+		<h1
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] lg:text-[40px] font-semibold leading-[32px] lg:leading-[48px] tracking-[-0.96px] lg:tracking-[-2.4px] mb-3"
+		>
+			Checkbox
+		</h1>
+		<p
+			class="first-letter:capitalize text-kui-light-gray-900 dark:text-kui-dark-gray-900 text-[16px] lg:text-[20px] font-normal leading-[24px] lg:leading-[30px] tracking-normal lg:tracking-[-0.33px]"
+		>
+			A control that toggles between two options, checked or unchecked.
+		</p>
+	</Row>
+{/snippet}
+
+{#snippet demoAndCode(demo: Snippet, code: string)}
+	<div
+		class="bg-kui-light-bg dark:bg-kui-dark-bg border border-kui-light-gray-200 dark:border-kui-dark-gray-400 rounded-xl"
+	>
+		<div class="w-full p-4 lg:p-6">
+			<div class="w-full flex flex-nowrap gap-4 items-center justify-between">
+				{@render demo()}
+			</div>
+		</div>
+		<div class="overflow-hidden rounded-b-xl">
+			<CollapseCode {code} />
+		</div>
+	</div>
+{/snippet}
+
+{#snippet defaultCheckbox()}
+	<Row>
+		<h2
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
+		>
+			<a href="#default" id="default">default</a>
+		</h2>
+		<div class="mt-4 xl:mt-7">
+			{#snippet demo()}
+				<div>
+					<Checkbox bind:checked>option 1</Checkbox>
+				</div>
+			{/snippet}
+			{@render demoAndCode(demo, checkboxDefault)}
+		</div>
+	</Row>
+{/snippet}
+
+{#snippet disabledCheckbox()}
+	<Row>
+		<h2
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
+		>
+			<a href="#default" id="default">Disabled</a>
+		</h2>
+		<div class="mt-4 xl:mt-7">
+			{#snippet demo()}
+				<div class="w-full space-y-4">
+					<Checkbox disabled>Disabled</Checkbox>
+					<Checkbox checked disabled>Disabled Checked</Checkbox>
+					<Checkbox disabled indeterminate>Disabled Indeterminate</Checkbox>
+				</div>
+			{/snippet}
+			{@render demoAndCode(demo, checkboxDisabled)}
+		</div>
+	</Row>
+{/snippet}
+
+{#snippet indeterminate()}
+	<Row>
+		<h2
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
+		>
+			<a href="#default" id="default">Indeterminate</a>
+		</h2>
+		<div class="mt-4 xl:mt-7">
+			{#snippet demo()}
+				<div>
+					<Checkbox indeterminate>option 1</Checkbox>
+				</div>
+			{/snippet}
+			{@render demoAndCode(demo, checkboxIndeterminate)}
+		</div>
+	</Row>
+{/snippet}
+
+{#snippet itemsSnip()}
+	<Row>
+		<h2
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
+		>
+			<a href="#default" id="default">Selected items</a>
+		</h2>
+		<div class="mt-4 xl:mt-7">
+			{#snippet demo()}
+				<div class="w-full space-y-4">
+					<Checkbox value="avatar" bind:items>avatar</Checkbox>
+					<Checkbox value="button" bind:items>button</Checkbox>
+					<Checkbox value="calendar" bind:items>calendar</Checkbox>
+					<Checkbox value="choicebox" bind:items>choicebox</Checkbox>
+				</div>
+			{/snippet}
+			{@render demoAndCode(demo, checkboxItems)}
+		</div>
+	</Row>
+{/snippet}
+
+{#snippet prevAndNext()}
+	<Row bottomLine={false}>
+		<Pagination
+			previous={{ title: 'collapse', href: '/collapse' }}
+			next={{ title: 'error', href: '/error' }}
+		/>
+	</Row>
+{/snippet}
+
+{#snippet cont()}
+	{@render checkbox()}
+	{@render defaultCheckbox()}
+	{@render disabledCheckbox()}
+	{@render indeterminate()}
+	{@render itemsSnip()}
+	{@render prevAndNext()}
+{/snippet}
+
+{#snippet aside()}
+	<Aside asideDataList={asideData} />
+{/snippet}
+
+<Shell asideSlot={aside} contSlot={cont} />