diff --git a/.changeset/frank-wings-strive.md b/.changeset/frank-wings-strive.md
new file mode 100644
index 00000000..bcfafa7e
--- /dev/null
+++ b/.changeset/frank-wings-strive.md
@@ -0,0 +1,5 @@
+---
+"@shipfox/react-ui": minor
+---
+
+Add checkbox and label components
diff --git a/libs/react/ui/index.css b/libs/react/ui/index.css
index 87004cb6..e992d928 100644
--- a/libs/react/ui/index.css
+++ b/libs/react/ui/index.css
@@ -321,6 +321,36 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px var(--color-primary-500);
+
+  /* Checkbox */
+  /* Checkbox - Unchecked States */
+  --checkbox-unchecked-bg: var(--background-components-base);
+  --checkbox-unchecked-bg-hover: var(--background-components-hover);
+  --checkbox-unchecked-border: var(--color-alpha-black-8);
+  --checkbox-unchecked-shadow:
+    0px 1px 2px 0px var(--color-alpha-black-12), 0px 0px 0px 1px var(--color-alpha-black-8);
+  --checkbox-unchecked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px
+    var(--color-neutral-0), 0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Checked States */
+  --checkbox-checked-bg: var(--foreground-highlight-interactive);
+  --checkbox-checked-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-checked-border: rgba(255, 75, 0, 0.69);
+  --checkbox-checked-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-checked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px
+    var(--color-neutral-0), 0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Indeterminate States */
+  --checkbox-indeterminate-bg: var(--foreground-highlight-interactive);
+  --checkbox-indeterminate-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-indeterminate-border: rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-focus-shadow:
+    0px 0px 0px 1px var(--color-neutral-0), 0px 0px 0px 3px rgba(255, 75, 0, 0.6);
   --shadow-tooltip:
     0 0 0 1px var(--color-alpha-black-8), 0 2px 4px 0 var(--color-alpha-black-8), 0 4px 8px 0
     var(--color-alpha-black-8);
@@ -482,6 +512,40 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
+
+  /* Checkbox */
+  /* Checkbox - Unchecked States */
+  --checkbox-unchecked-bg: var(--background-components-base);
+  --checkbox-unchecked-bg-hover: var(--background-components-hover);
+  --checkbox-unchecked-border: var(--color-alpha-white-10);
+  --checkbox-unchecked-shadow:
+    0px 1px 2px 0px var(--color-alpha-black-12), 0px 0px 0px 1px var(--color-alpha-white-10);
+  --checkbox-unchecked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px var(
+      --color-alpha-black-80
+    ),
+    0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Checked States */
+  --checkbox-checked-bg: var(--foreground-highlight-interactive);
+  --checkbox-checked-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-checked-border: rgba(255, 75, 0, 0.69);
+  --checkbox-checked-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-checked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px var(
+      --color-alpha-black-80
+    ),
+    0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Indeterminate States */
+  --checkbox-indeterminate-bg: var(--foreground-highlight-interactive);
+  --checkbox-indeterminate-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-indeterminate-border: rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-focus-shadow:
+    0px 0px 0px 1px var(--color-alpha-black-80), 0px 0px 0px 3px rgba(255, 75, 0, 0.6);
   --shadow-tooltip:
     0 -1px 0 0 var(--color-alpha-white-4), 0 2px 4px 0 var(--color-alpha-black-40), 0 0 0 1px
     var(--color-alpha-white-10), 0 4px 8px 0 var(--color-alpha-black-40);
@@ -808,6 +872,23 @@
   --shadow-button-neutral-focus: var(--shadow-button-neutral-focus);
   --shadow-button-danger: var(--shadow-button-danger);
   --shadow-button-danger-focus: var(--shadow-button-danger-focus);
+
+  /* Checkbox */
+  --color-checkbox-unchecked-bg: var(--checkbox-unchecked-bg);
+  --color-checkbox-unchecked-bg-hover: var(--checkbox-unchecked-bg-hover);
+  --color-checkbox-unchecked-border: var(--checkbox-unchecked-border);
+  --shadow-checkbox-unchecked: var(--checkbox-unchecked-shadow);
+  --shadow-checkbox-unchecked-focus: var(--checkbox-unchecked-focus-shadow);
+  --color-checkbox-checked-bg: var(--checkbox-checked-bg);
+  --color-checkbox-checked-bg-hover: var(--checkbox-checked-bg-hover);
+  --color-checkbox-checked-border: var(--checkbox-checked-border);
+  --shadow-checkbox-checked: var(--checkbox-checked-shadow);
+  --shadow-checkbox-checked-focus: var(--checkbox-checked-focus-shadow);
+  --color-checkbox-indeterminate-bg: var(--checkbox-indeterminate-bg);
+  --color-checkbox-indeterminate-bg-hover: var(--checkbox-indeterminate-bg-hover);
+  --color-checkbox-indeterminate-border: var(--checkbox-indeterminate-border);
+  --shadow-checkbox-indeterminate: var(--checkbox-indeterminate-shadow);
+  --shadow-checkbox-indeterminate-focus: var(--checkbox-indeterminate-focus-shadow);
   --shadow-tooltip: var(--shadow-tooltip);
 }
 
diff --git a/libs/react/ui/src/components/checkbox/checkbox-label.tsx b/libs/react/ui/src/components/checkbox/checkbox-label.tsx
new file mode 100644
index 00000000..437fa4a9
--- /dev/null
+++ b/libs/react/ui/src/components/checkbox/checkbox-label.tsx
@@ -0,0 +1,125 @@
+import {useId} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon/icon';
+import {Label} from '../label/label';
+import {Checkbox, type CheckboxProps} from './checkbox';
+
+export type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {
+  id?: string;
+  label: string;
+  optional?: boolean;
+  description?: string;
+  showInfoIcon?: boolean;
+  border?: boolean;
+  className?: string;
+  labelClassName?: string;
+  descriptionClassName?: string;
+};
+
+export function CheckboxLabel({
+  id,
+  label,
+  optional = false,
+  description,
+  showInfoIcon = false,
+  border = false,
+  className,
+  labelClassName,
+  descriptionClassName,
+  ...checkboxProps
+}: CheckboxLabelProps) {
+  const generateId = useId();
+  const checkboxId = id || generateId;
+  const isDisabled = checkboxProps.disabled ?? false;
+
+  const renderContent = (checkboxId: string) => (
+    <div className="flex flex-col gap-4 flex-1 min-w-0">
+      <div className="flex gap-4 items-center">
+        <Label
+          className={cn(
+            'text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap',
+            isDisabled
+              ? 'font-normal text-foreground-neutral-subtle'
+              : 'font-medium text-foreground-neutral-base',
+            labelClassName,
+          )}
+          htmlFor={checkboxId}
+        >
+          {label}
+        </Label>
+        {optional && (
+          <span className="text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap">
+            (Optional)
+          </span>
+        )}
+        {showInfoIcon && (
+          <Icon
+            name="info"
+            className="size-16 text-foreground-neutral-muted shrink-0"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+      {description && (
+        <p
+          className={cn(
+            'text-sm leading-20',
+            isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle',
+            descriptionClassName,
+          )}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+
+  if (border) {
+    return (
+      <Label
+        htmlFor={checkboxId}
+        className={cn(
+          // Base container styles with border
+          'flex items-start gap-10 rounded-8 p-8 transition-all duration-100',
+          // Unchecked state - default
+          'bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
+          // Unchecked state - hover
+          'hover:bg-checkbox-unchecked-bg-hover',
+          // Unchecked state - focus
+          'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active',
+          // Checked state - default
+          'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked',
+          // Checked state - hover
+          'has-data-[state=checked]:hover:bg-background-neutral-hover',
+          // Checked state - focus
+          'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
+          // Indeterminate state - default
+          'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate',
+          // Indeterminate state - hover
+          'has-data-[state=indeterminate]:hover:bg-background-neutral-hover',
+          // Indeterminate state - focus
+          'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
+          // Disabled state
+          isDisabled && 'opacity-50 cursor-not-allowed',
+          !isDisabled && 'cursor-pointer',
+          className,
+        )}
+      >
+        <span className="p-4">
+          <Checkbox id={checkboxId} {...checkboxProps} />
+        </span>
+        {renderContent(checkboxId)}
+      </Label>
+    );
+  }
+
+  // Without border variant
+  return (
+    <div className={cn('flex items-start gap-10', className)}>
+      <span className="p-2">
+        <Checkbox id={checkboxId} {...checkboxProps} />
+      </span>
+      {renderContent(checkboxId)}
+    </div>
+  );
+}
diff --git a/libs/react/ui/src/components/checkbox/checkbox-links.tsx b/libs/react/ui/src/components/checkbox/checkbox-links.tsx
new file mode 100644
index 00000000..5218f488
--- /dev/null
+++ b/libs/react/ui/src/components/checkbox/checkbox-links.tsx
@@ -0,0 +1,90 @@
+import {Label} from 'components/label';
+import {type ReactNode, useId} from 'react';
+import {cn} from 'utils/cn';
+import {Checkbox, type CheckboxProps} from './checkbox';
+
+export type CheckboxLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {
+  id?: string;
+  label: string;
+  links: CheckboxLink[];
+  separator?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  linkClassName?: string;
+};
+
+export function CheckboxLinks({
+  id,
+  label,
+  links,
+  separator,
+  className,
+  labelClassName,
+  linkClassName,
+  ...checkboxProps
+}: CheckboxLinksProps) {
+  const generateId = useId();
+  const checkboxId = id || generateId;
+  const isDisabled = checkboxProps.disabled ?? false;
+  const defaultSeparator = (
+    <span className="size-3 rounded-full bg-foreground-neutral-muted" aria-hidden="true" />
+  );
+
+  return (
+    <div className={cn('flex gap-10 items-start', className)}>
+      <span className="p-2">
+        <Checkbox id={checkboxId} {...checkboxProps} />
+      </span>
+      <div className="flex flex-col gap-4 items-start flex-1">
+        <Label
+          htmlFor={checkboxId}
+          className={cn(
+            'text-sm leading-20 font-medium text-foreground-neutral-base',
+            isDisabled && 'cursor-not-allowed opacity-50',
+            labelClassName,
+          )}
+        >
+          {label}
+        </Label>
+        <div className="flex gap-6 items-center">
+          {links.map((link, index) => (
+            <div key={link.label} className="flex gap-6 items-center">
+              {link.href ? (
+                <a
+                  href={link.href}
+                  onClick={link.onClick}
+                  className={cn(
+                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
+                    'hover:text-foreground-highlight-interactive-hover',
+                    linkClassName,
+                  )}
+                >
+                  {link.label}
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  onClick={link.onClick}
+                  className={cn(
+                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
+                    'hover:text-foreground-highlight-interactive-hover',
+                    linkClassName,
+                  )}
+                >
+                  {link.label}
+                </button>
+              )}
+              {index < links.length - 1 && (separator ?? defaultSeparator)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/libs/react/ui/src/components/checkbox/checkbox.stories.tsx b/libs/react/ui/src/components/checkbox/checkbox.stories.tsx
new file mode 100644
index 00000000..70cdca92
--- /dev/null
+++ b/libs/react/ui/src/components/checkbox/checkbox.stories.tsx
@@ -0,0 +1,375 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code, Header} from 'components/typography';
+import {Checkbox, CheckboxLabel, CheckboxLinks} from '.';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {control: 'boolean'},
+    checked: {control: 'boolean'},
+  },
+  args: {
+    size: 'md',
+    disabled: false,
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      <div className="flex flex-col gap-16">
+        <Header variant="h4">Controlled Checkbox</Header>
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Use the controls below to change the checkbox state
+        </Code>
+        <Checkbox {...args} />
+      </div>
+
+      <div className="flex flex-col gap-32">
+        <Header variant="h4">All States</Header>
+        {(['sm', 'md', 'lg'] as const).map((size) => (
+          <div key={size} className="flex flex-wrap gap-16">
+            <Header variant="h4">Size: {size}</Header>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Unchecked
+              </Code>
+              <Checkbox size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Checked
+              </Code>
+              <Checkbox size={size} checked />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Indeterminate
+              </Code>
+              <Checkbox size={size} checked="indeterminate" />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Disabled (Unchecked)
+              </Code>
+              <Checkbox size={size} disabled />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Disabled (Checked)
+              </Code>
+              <Checkbox size={size} checked disabled />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Focus
+              </Code>
+              <Checkbox size={size} className="focus" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+  parameters: {
+    pseudo: {
+      focusVisible: '.focus',
+    },
+  },
+};
+
+export const CheckboxLabelStory: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        CHECKBOX LABEL - WITHOUT BORDER
+      </Code>
+      <div className="flex flex-col gap-16">
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Indeterminate
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            checked
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+          />
+        </div>
+      </div>
+
+      <Code variant="label" className="text-foreground-neutral-subtle mt-32">
+        CHECKBOX LABEL - WITH BORDER
+      </Code>
+      <div className="flex flex-col gap-16">
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-hover-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Focus - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-focus-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+            className="focus"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-hover-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Focus - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-focus-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+            className="focus"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Indeterminate
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-indeterminate"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            disabled
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Indeterminate
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-indeterminate"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+            disabled
+            border
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+CheckboxLabelStory.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};
+
+export const CheckboxLinksStory: StoryObj = {
+  args: {
+    disabled: true,
+  },
+
+  render: () => (
+    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        CHECKBOX LINKS
+      </Code>
+      <div className="flex flex-col gap-16">
+        <CheckboxLinks
+          id="checkbox-links-default"
+          label="Accept policies"
+          links={[
+            {label: 'Terms of use', href: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+        />
+        <CheckboxLinks
+          id="checkbox-links-checked"
+          label="Accept policies"
+          links={[
+            {label: 'Terms of use', href: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+          checked
+        />
+      </div>
+    </div>
+  ),
+};
diff --git a/libs/react/ui/src/components/checkbox/checkbox.tsx b/libs/react/ui/src/components/checkbox/checkbox.tsx
new file mode 100644
index 00000000..1a173a14
--- /dev/null
+++ b/libs/react/ui/src/components/checkbox/checkbox.tsx
@@ -0,0 +1,71 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const checkboxVariants = cva(
+  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',
+  {
+    variants: {
+      size: {
+        sm: 'size-16',
+        md: 'size-20',
+        lg: 'size-24',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+);
+
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+export function Checkbox({
+  className,
+  size,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  ...props
+}: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onCheckedChange}
+      className={cn(
+        checkboxVariants({size}),
+        // Unchecked state - default
+        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
+        // Unchecked state - hover
+        'hover:bg-checkbox-unchecked-bg-hover',
+        // Unchecked state - focus
+        'focus-visible:shadow-checkbox-unchecked-focus',
+        // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',
+        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',
+        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
+        // Indeterminate state
+        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',
+        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',
+        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
+        // Disabled state
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        {checked === 'indeterminate' ? (
+          <Icon name="subtractLine" className="size-16" aria-hidden="true" />
+        ) : (
+          <Icon name="check" className="size-16" aria-hidden="true" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
diff --git a/libs/react/ui/src/components/checkbox/index.ts b/libs/react/ui/src/components/checkbox/index.ts
new file mode 100644
index 00000000..41af34df
--- /dev/null
+++ b/libs/react/ui/src/components/checkbox/index.ts
@@ -0,0 +1,3 @@
+export * from './checkbox';
+export * from './checkbox-label';
+export * from './checkbox-links';
diff --git a/libs/react/ui/src/components/icon/icon.tsx b/libs/react/ui/src/components/icon/icon.tsx
index 5c5f62a4..87193dbe 100644
--- a/libs/react/ui/src/components/icon/icon.tsx
+++ b/libs/react/ui/src/components/icon/icon.tsx
@@ -1,9 +1,12 @@
 import {
   type RemixiconComponentType,
+  RiCheckLine,
   RiCloseLine,
   RiGoogleFill,
   RiImageAddFill,
+  RiInformationFill,
   RiMicrosoftFill,
+  RiSubtractLine,
 } from '@remixicon/react';
 import type {ComponentProps} from 'react';
 import {
@@ -38,6 +41,9 @@ const iconsMap = {
   imageAdd: RiImageAddFill,
   close: RiCloseLine,
   shipfoxLogo: ShipfoxLogo,
+  check: RiCheckLine,
+  subtractLine: RiSubtractLine,
+  info: RiInformationFill,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;
diff --git a/libs/react/ui/src/components/index.ts b/libs/react/ui/src/components/index.ts
index 92c9914e..27b4672d 100644
--- a/libs/react/ui/src/components/index.ts
+++ b/libs/react/ui/src/components/index.ts
@@ -1,8 +1,10 @@
 export * from './alert';
 export * from './avatar';
 export * from './button';
+export * from './checkbox';
 export * from './icon';
 export * from './inline-tips';
+export * from './label';
 export * from './textarea';
 export * from './theme-provider';
 export * from './typography';
diff --git a/libs/react/ui/src/components/label/index.ts b/libs/react/ui/src/components/label/index.ts
new file mode 100644
index 00000000..301fbded
--- /dev/null
+++ b/libs/react/ui/src/components/label/index.ts
@@ -0,0 +1 @@
+export * from './label';
diff --git a/libs/react/ui/src/components/label/label.stories.tsx b/libs/react/ui/src/components/label/label.stories.tsx
new file mode 100644
index 00000000..088c0dd6
--- /dev/null
+++ b/libs/react/ui/src/components/label/label.stories.tsx
@@ -0,0 +1,67 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Checkbox} from 'components/checkbox';
+import {Input} from 'components/input';
+import {Textarea} from 'components/textarea';
+import {Label} from './label';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  argTypes: {
+    htmlFor: {control: 'text'},
+  },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="Enter your email" />
+    </div>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithTextarea: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="message">Message</Label>
+      <Textarea id="message" placeholder="Enter your message" />
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="required-field">
+        Required Field <span className="text-foreground-highlight-error">*</span>
+      </Label>
+      <Input id="required-field" type="text" placeholder="This field is required" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="disabled-field" className="opacity-50">
+        Disabled Field
+      </Label>
+      <Input id="disabled-field" type="text" placeholder="Disabled input" disabled />
+    </div>
+  ),
+};
diff --git a/libs/react/ui/src/components/label/label.tsx b/libs/react/ui/src/components/label/label.tsx
new file mode 100644
index 00000000..61d39aff
--- /dev/null
+++ b/libs/react/ui/src/components/label/label.tsx
@@ -0,0 +1,15 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+export type LabelProps = ComponentProps<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>;
+
+export function Label({className, ...props}: LabelProps) {
+  return <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />;
+}