diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 9c87845dc8..7cacc69209 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -2,29 +2,18 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Checkbox } from './Checkbox';
 
-const defaultArgs = {
-  disabled: false,
-  label: 'Checkbox',
-};
-
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
   component: Checkbox,
-  args: defaultArgs,
+  args: {
+    disabled: false,
+    label: 'Checkbox',
+  },
   parameters: {
     badges: ['1.0'],
   },
 
-  decorators: [
-    (Story) => (
-      <div
-        // Provides spacing to see focus indicator around checkbox.
-        className="m-1"
-      >
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div className="m-1">{Story()}</div>],
 };
 
 export default meta;
@@ -55,60 +44,22 @@ export const MediumChecked: Story = {
   },
 };
 
-export const Large: Story = {
-  ...Default,
-  args: {
-    size: 'lg',
-  },
-};
-
-export const LargeChecked: Story = {
-  ...Large,
-  args: {
-    ...Checked.args,
-    ...Large.args,
-  },
-};
-
 export const Indeterminate: Story = {
   args: {
     indeterminate: true,
   },
 };
 
+/**
+ * `Checkbox` can be disabled in each available state.
+ */
 export const Disabled: Story = {
-  render: () => (
-    <table className="border-spacing-8">
-      <tbody>
-        {/* Un-checked */}
-        <tr>
-          <td>
-            <Checkbox checked={false} disabled label="Disabled" />
-          </td>
-          <td>
-            <Checkbox checked={false} label="Default" readOnly />
-          </td>
-        </tr>
-        {/* Checked */}
-        <tr>
-          <td>
-            <Checkbox checked disabled label="Disabled" />
-          </td>
-          <td>
-            <Checkbox checked label="Default" readOnly />
-          </td>
-        </tr>
-        {/* Indeterminate */}
-        <tr>
-          <td>
-            <Checkbox disabled indeterminate label="Disabled" />
-          </td>
-          <td>
-            <Checkbox indeterminate label="Default" readOnly />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  render: (args) => (
+    <div className="p-0">
+      <Checkbox {...args} checked={false} disabled label="Disabled" />
+      <Checkbox {...args} checked disabled label="Disabled" />
+      <Checkbox {...args} disabled indeterminate label="Disabled" />
+    </div>
   ),
   parameters: {
     axe: {
@@ -117,35 +68,23 @@ export const Disabled: Story = {
   },
 };
 
+/**
+ * `Checkbox` doesn't require a visible label if `aria-label` is provided.
+ */
 export const WithoutVisibleLabel: Story = {
   args: {
     'aria-label': 'a checkbox has no name',
     label: undefined,
   },
-  render: (args) => (
-    <div className="flex flex-col gap-2">
-      <Checkbox {...args} readOnly />
-      <Checkbox {...args} checked readOnly />
-      <Checkbox {...args} indeterminate />
-      <Checkbox {...args} disabled />
-      <Checkbox {...args} checked disabled />
-      <Checkbox {...args} disabled indeterminate />
-    </div>
-  ),
 };
 
-export const LongLabels = {
-  render: () => {
-    const label = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
-
-    return (
-      <div className="grid w-80 grid-cols-2 gap-4">
-        <Checkbox label={label} readOnly />
-        <Checkbox label={label} readOnly size="md" />
-        <Checkbox disabled label={label} />
-        <Checkbox disabled label={label} size="md" />
-      </div>
-    );
+/**
+ * Long labels will sit adjacent to the text box, and allow clicking to change the state of the checkbox. When constrained,
+ * the text will wrap, fixing the checkbox to the top edge.
+ */
+export const LongLabels: Story = {
+  args: {
+    label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
   },
   parameters: {
     axe: {
@@ -153,21 +92,3 @@ export const LongLabels = {
     },
   },
 };
-
-export const WithCustomPositioning = {
-  parameters: {
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center">
-      <Checkbox.Label className="mr-2" htmlFor="test">
-        Label on Left
-      </Checkbox.Label>
-      <Checkbox.Input id="test" />
-    </div>
-  ),
-};
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index e3d2675c72..da717ac048 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import useForwardedRef from '../../util/useForwardedRef';
 import { useId } from '../../util/useId';
 import type { EitherInclusive } from '../../util/utility-types';
+import type { Size } from '../../util/variant-types';
 import { InputLabel, type InputLabelProps } from '../InputLabel/InputLabel';
 
 import styles from './Checkbox.module.css';
@@ -42,9 +43,11 @@ type CheckboxProps = Omit<CheckboxInputProps, 'id'> & {
    */
   id?: string;
   /**
-   * Size of the checkbox label.
+   * Size of the checkbox and associated label.
+   *
+   * **Defaults to 'lg'.**
    */
-  size?: CheckboxLabelProps['size'];
+  size?: Extract<Size, 'md' | 'lg'>;
 } & EitherInclusive<
     {
       /**
@@ -89,8 +92,6 @@ const CheckboxInput = React.forwardRef<HTMLInputElement, CheckboxInputProps>(
   },
 );
 
-CheckboxInput.displayName = 'CheckboxInput';
-
 const CheckboxLabel = ({ className, size, ...other }: CheckboxLabelProps) => {
   const componentClassName = clsx(
     size === 'md' && styles['checkbox__label--md'],
@@ -103,9 +104,10 @@ const CheckboxLabel = ({ className, size, ...other }: CheckboxLabelProps) => {
 /**
  * `import {Checkbox} from "@chanzuckerberg/eds";`
  *
- * Checkbox control indicating if something is selected or unselected.
+ * Checkbox control indicating if something is selected or unselected. Uncontrolled by default,
+ * it can be used in place of boolean-like form data.
  *
- * NOTE: Requires either a visible label or `aria-label` prop.
+ * **NOTE**: Requires either a visible `label` or `aria-label` prop.
  */
 export const Checkbox = Object.assign(
   forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
@@ -138,3 +140,4 @@ export const Checkbox = Object.assign(
 );
 
 Checkbox.displayName = 'Checkbox';
+CheckboxInput.displayName = 'CheckboxInput';
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 4f69389d91..6209f78d2a 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -49,128 +49,59 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
 <div
   class="m-1"
 >
-  <table
-    class="border-spacing-8"
+  <div
+    class="p-0"
   >
-    <tbody>
-      <tr>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              disabled=""
-              id=":r7:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg label--disabled"
-              for=":r7:"
-            >
-              Disabled
-            </label>
-          </div>
-        </td>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r8:"
-              readonly=""
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r8:"
-            >
-              Default
-            </label>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              checked=""
-              class="checkbox__input"
-              disabled=""
-              id=":r9:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg label--disabled"
-              for=":r9:"
-            >
-              Disabled
-            </label>
-          </div>
-        </td>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              checked=""
-              class="checkbox__input"
-              id=":ra:"
-              readonly=""
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":ra:"
-            >
-              Default
-            </label>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              disabled=""
-              id=":rb:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg label--disabled"
-              for=":rb:"
-            >
-              Disabled
-            </label>
-          </div>
-        </td>
-        <td>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rc:"
-              readonly=""
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rc:"
-            >
-              Default
-            </label>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+    <div
+      class="checkbox"
+    >
+      <input
+        class="checkbox__input"
+        disabled=""
+        id=":r5:"
+        type="checkbox"
+      />
+      <label
+        class="label label--lg label--disabled"
+        for=":r5:"
+      >
+        Disabled
+      </label>
+    </div>
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checkbox__input"
+        disabled=""
+        id=":r6:"
+        type="checkbox"
+      />
+      <label
+        class="label label--lg label--disabled"
+        for=":r6:"
+      >
+        Disabled
+      </label>
+    </div>
+    <div
+      class="checkbox"
+    >
+      <input
+        class="checkbox__input"
+        disabled=""
+        id=":r7:"
+        type="checkbox"
+      />
+      <label
+        class="label label--lg label--disabled"
+        for=":r7:"
+      >
+        Disabled
+      </label>
+    </div>
+  </div>
 </div>
 `;
 
@@ -181,12 +112,12 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
   <input
     class="checkbox__input"
     disabled=""
-    id=":rn:"
+    id=":ra:"
     type="checkbox"
   />
   <label
     class="label label--lg label--disabled"
-    for=":rn:"
+    for=":ra:"
   >
     Disabled
   </label>
@@ -194,28 +125,6 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
 `;
 
 exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
-<div
-  class="m-1"
->
-  <div
-    class="checkbox"
-  >
-    <input
-      class="checkbox__input"
-      id=":r6:"
-      type="checkbox"
-    />
-    <label
-      class="label label--lg"
-      for=":r6:"
-    >
-      Checkbox
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Large story renders snapshot 1`] = `
 <div
   class="m-1"
 >
@@ -237,7 +146,7 @@ exports[`<Checkbox /> Large story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Checkbox /> LargeChecked story renders snapshot 1`] = `
+exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
 <div
   class="m-1"
 >
@@ -245,96 +154,20 @@ exports[`<Checkbox /> LargeChecked story renders snapshot 1`] = `
     class="checkbox"
   >
     <input
-      checked=""
       class="checkbox__input"
-      id=":r5:"
+      id=":r9:"
       type="checkbox"
     />
     <label
       class="label label--lg"
-      for=":r5:"
+      for=":r9:"
     >
-      Checkbox
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit
     </label>
   </div>
 </div>
 `;
 
-exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
-<div
-  class="m-1"
->
-  <div
-    class="grid w-80 grid-cols-2 gap-4"
-  >
-    <div
-      class="checkbox"
-    >
-      <input
-        class="checkbox__input"
-        id=":rj:"
-        readonly=""
-        type="checkbox"
-      />
-      <label
-        class="label label--lg"
-        for=":rj:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        class="checkbox__input"
-        id=":rk:"
-        readonly=""
-        type="checkbox"
-      />
-      <label
-        class="label label--md checkbox__label--md"
-        for=":rk:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        class="checkbox__input"
-        disabled=""
-        id=":rl:"
-        type="checkbox"
-      />
-      <label
-        class="label label--lg label--disabled"
-        for=":rl:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        class="checkbox__input"
-        disabled=""
-        id=":rm:"
-        type="checkbox"
-      />
-      <label
-        class="label label--md label--disabled checkbox__label--md"
-        for=":rm:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<Checkbox /> Medium story renders snapshot 1`] = `
 <div
   class="m-1"
@@ -380,102 +213,19 @@ exports[`<Checkbox /> MediumChecked story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Checkbox /> WithCustomPositioning story renders snapshot 1`] = `
+exports[`<Checkbox /> WithoutVisibleLabel story renders snapshot 1`] = `
 <div
   class="m-1"
 >
   <div
-    class="flex items-center"
+    class="checkbox"
   >
-    <label
-      class="label label--lg mr-2"
-      for="test"
-    >
-      Label on Left
-    </label>
     <input
+      aria-label="a checkbox has no name"
       class="checkbox__input"
-      id="test"
+      id=":r8:"
       type="checkbox"
     />
   </div>
 </div>
 `;
-
-exports[`<Checkbox /> WithoutVisibleLabel story renders snapshot 1`] = `
-<div
-  class="m-1"
->
-  <div
-    class="flex flex-col gap-2"
-  >
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        class="checkbox__input"
-        id=":rd:"
-        readonly=""
-        type="checkbox"
-      />
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        checked=""
-        class="checkbox__input"
-        id=":re:"
-        readonly=""
-        type="checkbox"
-      />
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        class="checkbox__input"
-        id=":rf:"
-        type="checkbox"
-      />
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        class="checkbox__input"
-        disabled=""
-        id=":rg:"
-        type="checkbox"
-      />
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        checked=""
-        class="checkbox__input"
-        disabled=""
-        id=":rh:"
-        type="checkbox"
-      />
-    </div>
-    <div
-      class="checkbox"
-    >
-      <input
-        aria-label="a checkbox has no name"
-        class="checkbox__input"
-        disabled=""
-        id=":ri:"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/InputLabel/InputLabel.tsx b/src/components/InputLabel/InputLabel.tsx
index 712a22a0ce..67aeaa1b88 100644
--- a/src/components/InputLabel/InputLabel.tsx
+++ b/src/components/InputLabel/InputLabel.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
+import type { Size } from '../../util/variant-types';
 import styles from './InputLabel.module.css';
 
 export type InputLabelProps = {
@@ -16,9 +17,11 @@ export type InputLabelProps = {
    */
   htmlFor: string;
   /**
-   * Size of the label. Defaults to lg.
+   * Size of the label.
+   *
+   * **Defaults to 'lg'.**
    */
-  size?: 'md' | 'lg';
+  size?: Extract<Size, 'md' | 'lg'>;
   /**
    * Indicates disabled state of the input.
    */