diff --git a/docs/src/styles/components/checkbox/checkbox.css b/docs/src/styles/components/checkbox/checkbox.css
index 7adeb69..33ae2b6 100644
--- a/docs/src/styles/components/checkbox/checkbox.css
+++ b/docs/src/styles/components/checkbox/checkbox.css
@@ -1,6 +1,10 @@
 @import url('./basic.css');
 @import url('./controlled.css');
 @import url('./group.css');
+@import url('./group-controlled.css');
+@import url('./group-with-form.css');
+@import url('./group-with-invalid.css');
+@import url('./group-with-select-all.css');
 @import url('./indeterminate.css');
 @import url('./render-prop.css');
 @import url('./rootprovider.css');
diff --git a/docs/src/styles/components/checkbox/group-controlled.css b/docs/src/styles/components/checkbox/group-controlled.css
new file mode 100644
index 0000000..bbdcad5
--- /dev/null
+++ b/docs/src/styles/components/checkbox/group-controlled.css
@@ -0,0 +1,71 @@
+.checkbox-groupcontrolled [data-part="group"] {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.checkbox-groupcontrolled [data-part="root"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupcontrolled [data-part="root"][data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox-groupcontrolled [data-part="control"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--demo-border-emphasized);
+  border-radius: 0.25rem;
+  background: var(--demo-bg-checkbox);
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+}
+
+.checkbox-groupcontrolled [data-part="control"][data-hover] {
+  border-color: var(--demo-neutral-solid);
+}
+
+.checkbox-groupcontrolled [data-part="control"][data-focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--demo-coral-focus-ring);
+  border-color: var(--demo-coral-solid);
+}
+
+.checkbox-groupcontrolled [data-part="control"][data-state="checked"],
+.checkbox-groupcontrolled [data-part="control"][data-state="indeterminate"] {
+  background: var(--demo-coral-solid);
+  border-color: var(--demo-coral-solid);
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupcontrolled [data-part="indicator"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupcontrolled [data-part="indicator"][hidden] {
+  display: flex;
+  visibility: hidden;
+}
+
+.checkbox-groupcontrolled [data-part="label"] {
+  font-weight: 500;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupcontrolled [data-part="label"][data-disabled] {
+  color: var(--demo-neutral-fg-muted);
+}
diff --git a/docs/src/styles/components/checkbox/group-with-form.css b/docs/src/styles/components/checkbox/group-with-form.css
new file mode 100644
index 0000000..dde0c38
--- /dev/null
+++ b/docs/src/styles/components/checkbox/group-with-form.css
@@ -0,0 +1,71 @@
+.checkbox-groupwithform [data-part="group"] {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.checkbox-groupwithform [data-part="root"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithform [data-part="root"][data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox-groupwithform [data-part="control"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--demo-border-emphasized);
+  border-radius: 0.25rem;
+  background: var(--demo-bg-checkbox);
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+}
+
+.checkbox-groupwithform [data-part="control"][data-hover] {
+  border-color: var(--demo-neutral-solid);
+}
+
+.checkbox-groupwithform [data-part="control"][data-focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--demo-coral-focus-ring);
+  border-color: var(--demo-coral-solid);
+}
+
+.checkbox-groupwithform [data-part="control"][data-state="checked"],
+.checkbox-groupwithform [data-part="control"][data-state="indeterminate"] {
+  background: var(--demo-coral-solid);
+  border-color: var(--demo-coral-solid);
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithform [data-part="indicator"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithform [data-part="indicator"][hidden] {
+  display: flex;
+  visibility: hidden;
+}
+
+.checkbox-groupwithform [data-part="label"] {
+  font-weight: 500;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithform [data-part="label"][data-disabled] {
+  color: var(--demo-neutral-fg-muted);
+}
diff --git a/docs/src/styles/components/checkbox/group-with-invalid.css b/docs/src/styles/components/checkbox/group-with-invalid.css
new file mode 100644
index 0000000..060506a
--- /dev/null
+++ b/docs/src/styles/components/checkbox/group-with-invalid.css
@@ -0,0 +1,71 @@
+.checkbox-groupwithinvalid [data-part="group"] {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.checkbox-groupwithinvalid [data-part="root"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithinvalid [data-part="root"][data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox-groupwithinvalid [data-part="control"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--demo-border-emphasized);
+  border-radius: 0.25rem;
+  background: var(--demo-bg-checkbox);
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+}
+
+.checkbox-groupwithinvalid [data-part="control"][data-hover] {
+  border-color: var(--demo-neutral-solid);
+}
+
+.checkbox-groupwithinvalid [data-part="control"][data-focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--demo-coral-focus-ring);
+  border-color: var(--demo-coral-solid);
+}
+
+.checkbox-groupwithinvalid [data-part="control"][data-state="checked"],
+.checkbox-groupwithinvalid [data-part="control"][data-state="indeterminate"] {
+  background: var(--demo-coral-solid);
+  border-color: var(--demo-coral-solid);
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithinvalid [data-part="indicator"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithinvalid [data-part="indicator"][hidden] {
+  display: flex;
+  visibility: hidden;
+}
+
+.checkbox-groupwithinvalid [data-part="label"] {
+  font-weight: 500;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithinvalid [data-part="label"][data-disabled] {
+  color: var(--demo-neutral-fg-muted);
+}
diff --git a/docs/src/styles/components/checkbox/group-with-select-all.css b/docs/src/styles/components/checkbox/group-with-select-all.css
new file mode 100644
index 0000000..9d7925f
--- /dev/null
+++ b/docs/src/styles/components/checkbox/group-with-select-all.css
@@ -0,0 +1,71 @@
+.checkbox-groupwithselectall [data-part="group"] {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.checkbox-groupwithselectall [data-part="root"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithselectall [data-part="root"][data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox-groupwithselectall [data-part="control"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--demo-border-emphasized);
+  border-radius: 0.25rem;
+  background: var(--demo-bg-checkbox);
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+}
+
+.checkbox-groupwithselectall [data-part="control"][data-hover] {
+  border-color: var(--demo-neutral-solid);
+}
+
+.checkbox-groupwithselectall [data-part="control"][data-focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--demo-coral-focus-ring);
+  border-color: var(--demo-coral-solid);
+}
+
+.checkbox-groupwithselectall [data-part="control"][data-state="checked"],
+.checkbox-groupwithselectall [data-part="control"][data-state="indeterminate"] {
+  background: var(--demo-coral-solid);
+  border-color: var(--demo-coral-solid);
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithselectall [data-part="indicator"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--demo-coral-contrast);
+}
+
+.checkbox-groupwithselectall [data-part="indicator"][hidden] {
+  display: flex;
+  visibility: hidden;
+}
+
+.checkbox-groupwithselectall [data-part="label"] {
+  font-weight: 500;
+  color: var(--demo-neutral-fg);
+}
+
+.checkbox-groupwithselectall [data-part="label"][data-disabled] {
+  color: var(--demo-neutral-fg-muted);
+}
diff --git a/packages/vue/src/components/checkbox/examples/GroupControlled.vue b/packages/vue/src/components/checkbox/examples/GroupControlled.vue
new file mode 100644
index 0000000..339f469
--- /dev/null
+++ b/packages/vue/src/components/checkbox/examples/GroupControlled.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Checkbox } from '../index'
+import { ref } from 'vue'
+
+const items = [
+  { label: 'React', value: 'react' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Vue', value: 'vue' },
+]
+
+const value = ref(['react'])
+</script>
+
+<template>
+  <div>
+    <Checkbox.Group v-model="value" name="framework">
+      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
+        <Checkbox.Control>
+          <Checkbox.Indicator>
+            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </Checkbox.Indicator>
+        </Checkbox.Control>
+        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
+        <Checkbox.HiddenInput />
+      </Checkbox.Root>
+    </Checkbox.Group>
+    <pre>Selected: {{ JSON.stringify(value) }}</pre>
+  </div>
+</template>
diff --git a/packages/vue/src/components/checkbox/examples/GroupWithForm.vue b/packages/vue/src/components/checkbox/examples/GroupWithForm.vue
new file mode 100644
index 0000000..0d8d653
--- /dev/null
+++ b/packages/vue/src/components/checkbox/examples/GroupWithForm.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Checkbox } from '../index'
+
+const items = [
+  { label: 'React', value: 'react' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Vue', value: 'vue' },
+]
+
+function handleSubmit(e: Event) {
+  e.preventDefault()
+  // eslint-disable-next-line no-console
+  console.log(new FormData(e.currentTarget as HTMLFormElement).getAll('framework'))
+}
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <Checkbox.Group :defaultValue="['react']" name="framework">
+      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
+        <Checkbox.Control>
+          <Checkbox.Indicator>
+            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </Checkbox.Indicator>
+        </Checkbox.Control>
+        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
+        <Checkbox.HiddenInput />
+      </Checkbox.Root>
+    </Checkbox.Group>
+    <button type="submit">Submit</button>
+  </form>
+</template>
diff --git a/packages/vue/src/components/checkbox/examples/GroupWithInvalid.vue b/packages/vue/src/components/checkbox/examples/GroupWithInvalid.vue
new file mode 100644
index 0000000..b8096e3
--- /dev/null
+++ b/packages/vue/src/components/checkbox/examples/GroupWithInvalid.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Checkbox } from '../index'
+
+const items = [
+  { label: 'React', value: 'react' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Vue', value: 'vue' },
+]
+</script>
+
+<template>
+  <Checkbox.Group invalid>
+    <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
+      <Checkbox.Control>
+        <Checkbox.Indicator>
+          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </Checkbox.Indicator>
+      </Checkbox.Control>
+      <Checkbox.Label>{{ item.label }}</Checkbox.Label>
+      <Checkbox.HiddenInput />
+    </Checkbox.Root>
+  </Checkbox.Group>
+</template>
diff --git a/packages/vue/src/components/checkbox/examples/GroupWithSelectAll.vue b/packages/vue/src/components/checkbox/examples/GroupWithSelectAll.vue
new file mode 100644
index 0000000..bfdca3d
--- /dev/null
+++ b/packages/vue/src/components/checkbox/examples/GroupWithSelectAll.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Checkbox } from '../index'
+import { computed, ref } from 'vue'
+
+const items = [
+  { label: 'React', value: 'react' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Vue', value: 'vue' },
+]
+
+const value = ref<string[]>([])
+
+const allSelected = computed(() => value.value.length === items.length)
+const indeterminate = computed(() => value.value.length > 0 && value.value.length < items.length)
+
+function handleSelectAll(checked: boolean) {
+  value.value = checked ? items.map(item => item.value) : []
+}
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 10px;">
+    <Checkbox.Root value="all" :checked="indeterminate ? 'indeterminate' : allSelected" @checkedChange="handleSelectAll(!!$event.checked)">
+      <Checkbox.Control>
+        <Checkbox.Indicator>
+          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </Checkbox.Indicator>
+        <Checkbox.Indicator indeterminate>_</Checkbox.Indicator>
+      </Checkbox.Control>
+      <Checkbox.Label>Select All</Checkbox.Label>
+      <Checkbox.HiddenInput />
+    </Checkbox.Root>
+
+    <Checkbox.Group v-model="value" name="framework">
+      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
+        <Checkbox.Control>
+          <Checkbox.Indicator>
+            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </Checkbox.Indicator>
+          <Checkbox.Indicator indeterminate>_</Checkbox.Indicator>
+        </Checkbox.Control>
+        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
+        <Checkbox.HiddenInput />
+      </Checkbox.Root>
+    </Checkbox.Group>
+
+    <pre>Selected: {{ JSON.stringify(value) }}</pre>
+  </div>
+</template>
diff --git a/packages/vue/src/components/checkbox/stories/checkbox.stories.ts b/packages/vue/src/components/checkbox/stories/checkbox.stories.ts
index 82a62d4..8002363 100644
--- a/packages/vue/src/components/checkbox/stories/checkbox.stories.ts
+++ b/packages/vue/src/components/checkbox/stories/checkbox.stories.ts
@@ -1,6 +1,10 @@
 import Basic from '../examples/Basic.vue'
 import Controlled from '../examples/Controlled.vue'
 import Group from '../examples/Group.vue'
+import GroupControlled from '../examples/GroupControlled.vue'
+import GroupWithForm from '../examples/GroupWithForm.vue'
+import GroupWithInvalid from '../examples/GroupWithInvalid.vue'
+import GroupWithSelectAll from '../examples/GroupWithSelectAll.vue'
 import Indeterminate from '../examples/Indeterminate.vue'
 import RenderProp from '../examples/RenderProp.vue'
 import RootProvider from '../examples/RootProvider.vue'
@@ -34,6 +38,34 @@ export function group() {
   }
 }
 
+export function groupControlled() {
+  return {
+    components: { GroupControlled },
+    template: '<GroupControlled />',
+  }
+}
+
+export function groupWithForm() {
+  return {
+    components: { GroupWithForm },
+    template: '<GroupWithForm />',
+  }
+}
+
+export function groupWithInvalid() {
+  return {
+    components: { GroupWithInvalid },
+    template: '<GroupWithInvalid />',
+  }
+}
+
+export function groupWithSelectAll() {
+  return {
+    components: { GroupWithSelectAll },
+    template: '<GroupWithSelectAll />',
+  }
+}
+
 export function indeterminateExample() {
   return {
     components: { Indeterminate },