diff --git a/.specs/checkbox.md b/.specs/checkbox.md
index 3f991f52..3ff9fb8d 100644
--- a/.specs/checkbox.md
+++ b/.specs/checkbox.md
@@ -2,36 +2,55 @@
 name: checkbox
 category: inputs
 structure: monolithic
-status: implemented
-spec_version: 2
-checksum: d0a27b8ca2563f33c09954c4657f76af2b4edab6e87bb5367d0ab69d366a2acb
+status: approved
+spec_version: 3
+checksum: 2fd0e74289221cb07d676ea9cecad5c547ffedc51452a69e0e9e552b05ab2cb3
 created: 2026-05-22
-last_updated: 2026-05-22
+last_updated: 2026-06-24
 ---
+
 # Checkbox — Component Spec
 
 ## Purpose
 
-Collects or edits user input. Migrated from the existing implementation at `packages/webkit/src/components/webkit/inputs/checkbox/`.
+Square checkbox control only — the box, the native input, and the check glyph, with no label or description chrome. Use it when you compose your own label, or reach for `FieldCheckbox` / `FieldCheckboxBlock` when you want built-in text. Supports a single boolean (`binary`) or collecting a `value` into an array model.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '@aziontech/webkit/checkbox'
+
+const accepted = ref(false)
+</script>
+
+<template>
+  <label class="inline-flex items-center gap-[var(--spacing-2)]">
+    <Checkbox v-model="accepted" binary input-id="accept-terms" />
+    Accept terms
+  </label>
+</template>
+```
 
 ## Props
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
-| `modelValue` | `string` | `'undefined'` | no | model Value. |
-| `value` | `string` | `'undefined'` | no | value. |
-| `binary` | `boolean` | `false` | no | binary. |
+| `modelValue` | `unknown` | `undefined` | no | Bound value: a boolean in `binary` mode, otherwise the array/value the control reflects. |
+| `value` | `unknown` | `undefined` | no | This checkbox's value, added to or removed from the model array when not `binary`. |
+| `binary` | `boolean` | `false` | no | Toggles a single boolean instead of collecting `value` into an array. |
 | `disabled` | `boolean` | `false` | no | Disables interaction and applies disabled tokens. |
-| `readonly` | `boolean` | `false` | no | readonly. |
-| `inputId` | `string` | `'undefined'` | no | input Id. |
+| `readonly` | `boolean` | `false` | no | Prevents changes while the control stays focusable. |
+| `inputId` | `string` | `undefined` | no | Forwarded to the native input `id`; pair with an external label's `for`. |
 | `name` | `string` | `undefined` | no | HTML name for form submission. |
-| `tabindex` | `number` | `'undefined'` | no | tabindex. |
+| `tabindex` | `number \| undefined` | `undefined` | no | Tab order for the native input. |
 
 ## Events
 
 | Event | Payload | Notes |
 |---|---|---|
-| `update:modelValue` | `unknown` | — |
+| `update:modelValue` | `unknown` | Emitted on toggle; payload is the next boolean (`binary`) or the updated value array. |
 
 ## Slots
 
@@ -39,25 +58,32 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 
 ## States
 
-- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`
+- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`, `readonly`, `checked`
+- `data-checked` mirrors the checked state
 - `data-disabled` mirrors the `disabled` prop
+- `data-readonly` mirrors the `readonly` prop
 
 ## Motion & Animations
 
-| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+| Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
 |---|---|---|---|
-| state change | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+| hover / active state change | `transition-opacity duration-fast-02 ease-productive-entrance` on the hover/active ghost overlays | semantic (matches catalog) | `motion-reduce:transition-none` |
 
 ## Tokens
 
 | Region | Token (DESIGN.md) |
 |---|---|
-| typography | .text-body-sm |
 | surface | `var(--bg-surface)` |
-| text | `var(--text-default)` |
-| spacing | `var(--spacing-3)` |
-| shape | `var(--shape-elements)` |
+| border | `var(--border-default)` |
+| checked surface | `var(--primary)` |
+| checked glyph | `var(--primary-contrast)` |
+| shape | `var(--shape-button)` |
+| hover overlay | `var(--bg-hover)` |
+| active overlay | `var(--bg-active)` |
+| disabled surface | `var(--bg-disabled)` |
+| disabled glyph | `var(--text-disabled)` |
 | ring | `var(--ring-color)` |
+| ring offset | `var(--bg-canvas)` |
 
 ## Theme gaps
 
@@ -67,17 +93,17 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
-- Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
-- ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
-- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
-- `motion-reduce:transition-none motion-reduce:transform-none` on animated states.
-- Touch target ≥40×40 px where the control is interactive.
+- Visible focus: descendant native input drives the ring — `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)] has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)]`
+- Keyboard map: `Tab` focuses the native input; `Space` toggles checked state (native checkbox behavior).
+- ARIA: renders a real `<input type="checkbox">` with `aria-checked`; control-only, so associate copy via `inputId` + an external label `for`, or use `FieldCheckbox`.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
+- `motion-reduce:transition-none` on the animated ghost overlays.
+- Touch target: the box is 1.125rem (18px) — justified deviation for a control-only primitive; the larger ≥40×40 px hit area is provided by the field wrappers (`FieldCheckbox` / `FieldCheckboxBlock`) or the consumer's label.
 
 ## Stories (Storybook)
 
 - Default
-- Disabled
+- Disabled — demonstrates the `disabled` prop (checked and unchecked).
 
 ## Constraints — DO NOT
 
@@ -94,7 +120,8 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 - Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
 - Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
 - Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
-- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
 - Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
 - Do not edit the root `package.json` or `.github/workflows/*`.
 - Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
diff --git a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
index a29e3f65..013409dc 100644
--- a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
+++ b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
@@ -1,14 +1,13 @@
-import { ref } from 'vue'
-
 import Checkbox from '@aziontech/webkit/checkbox'
+import { ref, watch } from 'vue'
 
 /** @type {import('@storybook/vue3').Meta<typeof Checkbox>} */
 const meta = {
- title: 'Components/Inputs/Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   parameters: {
-    layout: 'padded',
+    layout: 'centered',
     backgrounds: { default: 'dark' },
     a11y: {
       config: {
@@ -20,25 +19,44 @@ const meta = {
     },
     docs: {
       description: {
-        component:
-          'Control only — the square checkbox input with no label or description. Pair with an external label or use FieldCheckbox / FieldCheckboxBlock for built-in text.'
+        component: [
+          'Square checkbox control only — the box, the native input, and the check glyph, with no label or description chrome. Use it when you compose your own label, or reach for `FieldCheckbox` / `FieldCheckboxBlock` when you want built-in text. Supports a single boolean (`binary`) or collecting a `value` into an array model.',
+          '',
+          '## Usage',
+          '',
+          '```vue',
+          '<script setup>',
+          "import { ref } from 'vue'",
+          "import Checkbox from '@aziontech/webkit/checkbox'",
+          '',
+          'const accepted = ref(false)',
+          '</script>',
+          '',
+          '<template>',
+          '  <label class="inline-flex items-center gap-[var(--spacing-2)]">',
+          '    <Checkbox v-model="accepted" binary input-id="accept-terms" />',
+          '    Accept terms',
+          '  </label>',
+          '</template>',
+          '```'
+        ].join('\n')
       }
     }
   },
   argTypes: {
     modelValue: {
       control: 'boolean',
-      description: 'model Value.',
+      description: 'Bound value: a boolean in binary mode, otherwise the array/value the control reflects.',
       table: { type: { summary: 'unknown' }, category: 'props' }
     },
     value: {
       control: false,
-      description: 'value.',
+      description: "This checkbox's value, added to or removed from the model array when not binary.",
       table: { type: { summary: 'unknown' }, category: 'props' }
     },
     binary: {
       control: 'boolean',
-      description: 'binary.',
+      description: 'Toggles a single boolean instead of collecting value into an array.',
       table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
     },
     disabled: {
@@ -48,12 +66,12 @@ const meta = {
     },
     readonly: {
       control: 'boolean',
-      description: 'readonly.',
+      description: 'Prevents changes while the control stays focusable.',
       table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
     },
     inputId: {
       control: 'text',
-      description: 'input Id.',
+      description: 'Forwarded to the native input id; pair with an external label for attribute.',
       table: { type: { summary: 'string' }, category: 'props' }
     },
     name: {
@@ -63,76 +81,68 @@ const meta = {
     },
     tabindex: {
       control: 'number',
-      description: 'tabindex.',
-      table: { type: { summary: 'number' }, category: 'props' }
+      description: 'Tab order for the native input.',
+      table: { type: { summary: 'number | undefined' }, category: 'props' }
     },
     'onUpdate:modelValue': {
       action: 'update:modelValue',
-      description: 'Emitted when the value changes.',
+      description: 'Emitted on toggle; payload is the next boolean (binary) or the updated value array.',
       table: { type: { summary: 'unknown' }, category: 'events' }
     }
+  },
+  args: {
+    binary: true,
+    disabled: false,
+    readonly: false
   }
 }
 
 export default meta
 
-export const Default = {
-  render: () => ({
-    components: { Checkbox },
-    setup() {
-      const value = ref(false)
-      return { value }
-    },
-    template: `
-      <Checkbox
-        v-model="value"
-        binary
-        input-id="webkit-checkbox-default"
-        aria-label="Toggle option"
-      />
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Binary control only — associate copy via an external label or FieldCheckbox.'
+const Template = (args) => ({
+  components: { Checkbox },
+  setup() {
+    const value = ref(args.modelValue ?? false)
+
+    watch(
+      () => args.modelValue,
+      (next) => {
+        value.value = next ?? false
       }
+    )
+
+    const onUpdate = (next) => {
+      value.value = next
+      args['onUpdate:modelValue']?.(next)
     }
+
+    return { args, value, onUpdate }
+  },
+  template: '<Checkbox v-bind="args" :model-value="value" @update:model-value="onUpdate" />'
+})
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Checkbox>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: { description: { story: 'Binary control only — associate copy via an external label or FieldCheckbox.' } }
   }
 }
 
 export const Disabled = {
-  render: () => ({
+  render: (args) => ({
     components: { Checkbox },
     setup() {
-      const checked = ref(true)
-      const unchecked = ref(false)
-      return { checked, unchecked }
+      return { args }
     },
     template: `
       <div class="flex items-center gap-[var(--spacing-4)]">
-        <Checkbox
-          v-model="checked"
-          binary
-          disabled
-          input-id="webkit-checkbox-disabled-on"
-          aria-label="Disabled checked"
-        />
-        <Checkbox
-          v-model="unchecked"
-          binary
-          disabled
-          input-id="webkit-checkbox-disabled-off"
-          aria-label="Disabled unchecked"
-        />
+        <Checkbox v-bind="args" :model-value="true" disabled aria-label="Disabled checked" />
+        <Checkbox v-bind="args" :model-value="false" disabled aria-label="Disabled unchecked" />
       </div>
     `
   }),
   parameters: {
-    docs: {
-      description: {
-        story: 'Disabled checked and unchecked controls without label chrome.'
-      }
-    }
+    docs: { description: { story: 'Disabled control in both checked and unchecked states.' } }
   }
 }
diff --git a/packages/webkit/src/components/inputs/checkbox/checkbox.vue b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
index 57b5a067..69a1e919 100644
--- a/packages/webkit/src/components/inputs/checkbox/checkbox.vue
+++ b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
-  import { cn } from '../../../utils/cn'
-  import { toggleControlClasses } from '../presets/interactive-states'
-
   defineOptions({
     name: 'Checkbox',
     inheritAttrs: false
   })
 
   interface Props {
-    /** model Value. */
+    /** Bound value: a boolean in `binary` mode, otherwise the array/value the control reflects. */
     modelValue?: unknown
-    /** value. */
+    /** This checkbox's value, added to or removed from the model array when not `binary`. */
     value?: unknown
-    /** binary. */
+    /** Toggles a single boolean instead of collecting `value` into an array. */
     binary?: boolean
     /** Disables interaction and applies disabled tokens. */
     disabled?: boolean
-    /** readonly. */
+    /** Prevents changes while the control stays focusable. */
     readonly?: boolean
-    /** input Id. */
+    /** Forwarded to the native input id; pair with an external label for attribute. */
     inputId?: string
     /** HTML name for form submission. */
     name?: string
-    /** tabindex. */
+    /** Tab order for the native input. */
     tabindex?: number
   }
 
@@ -89,34 +86,16 @@
 
     emit('update:modelValue', current)
   }
-
-  const sharedClasses = [
-    ...toggleControlClasses,
-    'group size-[1.125rem] rounded-[var(--shape-button)] border border-[var(--border-default)]',
-    'bg-[var(--bg-surface)] text-transparent'
-  ]
-
-  const checkedClasses =
-    'data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:text-[var(--primary-contrast)] data-[checked]:before:hidden data-[checked]:after:hidden'
-
-  const disabledClasses =
-    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed'
-
-  const iconClasses =
-    'size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]'
-
-  const rootClasses = computed(() =>
-    cn(sharedClasses, checkedClasses, disabledClasses, attrs.class)
-  )
 </script>
 
 <template>
   <span
-    :class="rootClasses"
+    :class="attrs.class"
     :data-testid="testId"
     :data-checked="isChecked || null"
     :data-disabled="disabled || null"
     :data-readonly="readonly || null"
+    class="group relative inline-flex size-[1.125rem] shrink-0 items-center justify-center align-middle rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] text-transparent before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0 after:content-[''] after:transition-opacity after:duration-fast-02 after:ease-productive-entrance hover:before:opacity-100 active:after:opacity-100 motion-reduce:before:transition-none motion-reduce:after:transition-none has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)] has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)] focus-within:before:opacity-0 has-[:focus-visible]:before:opacity-0 data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:text-[var(--primary-contrast)] data-[checked]:before:hidden data-[checked]:after:hidden data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[disabled]:before:hidden data-[disabled]:after:hidden data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed data-[readonly]:before:hidden data-[readonly]:after:hidden"
   >
     <input
       :id="inputId"
@@ -134,7 +113,7 @@
     />
     <svg
       v-if="isChecked"
-      :class="iconClasses"
+      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]"
       viewBox="0 0 12 12"
       fill="none"
       aria-hidden="true"