docs(Checkbox): restructure page to match component docs spec

Reorder sections to Usage → Anatomy → Examples → Recipes → Accessibility → FAQ,
rewrite Form Integration recipe to correctly describe the auto-render behavior
of Checkbox.Root's name prop, add Styling with Data Attributes recipe, and add
a FAQ section.

Author: johnleider

apps/docs/src/pages/components/forms/checkbox.md

@@ -18,17 +18,12 @@ related:
 
 # Checkbox
 
-A headless checkbox component with dual-mode support: standalone boolean binding or group multi-selection with tri-state.
+A checkbox for boolean state or multi-selection groups with tri-state support.
 
 <DocsPageFeatures :frontmatter />
 
 ## Usage
 
-The Checkbox component supports two modes:
-
-- **Standalone mode**: Use `v-model` on `Checkbox.Root` for simple boolean state
-- **Group mode**: Wrap in `Checkbox.Group` for multi-selection with array v-model
-
 ::: example
 /components/checkbox/basic
 
@@ -82,11 +77,7 @@ A standalone checkbox with checkmark indicator and label.
 </template>
 ```
 
-## Recipes
-
-### Group Mode
-
-Wrap checkboxes in `Checkbox.Group` for multi-selection with array-based v-model:
+## Examples
 
 ::: example
 /components/checkbox/group
@@ -97,49 +88,63 @@ Multi-select checkbox group with three fruit options showing the selected state.
 
 :::
 
+::: example
+/components/checkbox/indeterminate
+
+### Select All Pattern
+
+A "select all" checkbox with tri-state behavior (checked, unchecked, indeterminate) over nested items.
+
+:::
+
+The `SelectAll` component:
+- Binds to the group's `isAllSelected` and `isMixed` state
+- Calls `toggleAll` on click
+- Does NOT register as a group item
+- Sets `aria-checked="mixed"` and `data-state="indeterminate"` when partially selected
+
+## Recipes
+
 ### Form Integration
 
-When the `name` prop is provided on `Checkbox.Root`, a hidden native checkbox is automatically rendered for form submission:
+Pass the `name` prop on `Checkbox.Root` and a hidden native checkbox is rendered automatically. No `Checkbox.HiddenInput` placement is required:
 
 ```vue
 <template>
-  <!-- Auto-renders hidden input for form submission -->
   <Checkbox.Root name="agree" value="yes">
     <Checkbox.Indicator>✓</Checkbox.Indicator>
   </Checkbox.Root>
 </template>
 ```
 
-For custom form integration, use `Checkbox.HiddenInput` explicitly:
+Place `Checkbox.HiddenInput` explicitly only when you need to override the auto-rendered name, value, or form association:
 
 ```vue
 <template>
-  <Checkbox.Root>
+  <Checkbox.Root name="agree">
     <Checkbox.Indicator>✓</Checkbox.Indicator>
 
-    <Checkbox.HiddenInput name="custom" value="override" />
+    <Checkbox.HiddenInput name="agree_override" value="custom" />
   </Checkbox.Root>
 </template>
 ```
 
-### Indeterminate State
-
-Use `Checkbox.SelectAll` within a group for "select all" patterns. It automatically reflects the group's aggregate state and toggles all items on click:
+### Styling with Data Attributes
 
-::: example
-/components/checkbox/indeterminate
+`Checkbox.Root` exposes data attributes for CSS styling without conditional classes:
 
-### Indeterminate / Select All
+| Attribute | Values | Notes |
+|-----------|--------|-------|
+| `data-state` | `checked`, `unchecked`, `indeterminate` | Reflects current visual state |
+| `data-disabled` | `true` | Present only when disabled |
 
-A "select all" checkbox with tri-state behavior (checked, unchecked, indeterminate) over nested items.
-
-:::
-
-The `SelectAll` component:
-- Binds to the group's `isAllSelected` and `isMixed` state
-- Calls `toggleAll` on click
-- Does NOT register as a group item
-- Sets `aria-checked="mixed"` and `data-state="indeterminate"` when partially selected
+```vue
+<template>
+  <Checkbox.Root class="size-5 rounded border data-[state=checked]:bg-primary data-[disabled]:opacity-50">
+    <Checkbox.Indicator>✓</Checkbox.Indicator>
+  </Checkbox.Root>
+</template>
+```
 
 ## Accessibility
 
@@ -164,4 +169,24 @@ For custom implementations, use `renderless` mode and bind the `attrs` slot prop
 </template>
 ```
 
+::: faq
+
+??? How do I disable a checkbox?
+
+Pass the `disabled` prop on `Checkbox.Root`. The component sets `aria-disabled`, removes `tabindex`, ignores click and Space key events, and exposes `data-disabled="true"` for styling.
+
+??? Why does my form submission miss the checkbox value?
+
+`Checkbox.Root` only renders the hidden native input when a `name` prop is set. Without `name`, the checkbox is purely visual and won't appear in `FormData`. Add `name="myField"` (and optionally `value`) to participate in form submission.
+
+??? How does Checkbox.Group differ from a RadioGroup?
+
+`Checkbox.Group` is a multi-selection container — its v-model is an array of selected values, and individual checkboxes can be in an indeterminate state via `Checkbox.SelectAll`. A radio group is single-selection — exactly one option is active and v-model holds a single value.
+
+??? Can I use Checkbox.Root without the Indicator subcomponent?
+
+Yes. `Checkbox.Indicator` is purely cosmetic — it reads checkbox state from context to render a checkmark. You can omit it entirely and render your own visual using the `attrs` slot prop on `Checkbox.Root`, or use `renderless` mode for full control over the rendered element.
+
+:::
+
 <DocsApi />