diff --git a/docs/content/docs/2.components/checkbox-group.md b/docs/content/docs/2.components/checkbox-group.md
index 3d79f203b0..a24175533e 100644
--- a/docs/content/docs/2.components/checkbox-group.md
+++ b/docs/content/docs/2.components/checkbox-group.md
@@ -64,8 +64,9 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, leadingIcon?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---
@@ -129,6 +130,36 @@ props:
 ---
 ::
 
+### Icon
+
+Use the `icon` property in the items to display an icon next to the label.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  modelValue:
+    - 'system'
+  items:
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'system'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      value: 'light'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      value: 'dark'
+---
+::
+
 ### Legend
 
 Use the `legend` prop to set the legend of the CheckboxGroup.
diff --git a/docs/content/docs/2.components/checkbox.md b/docs/content/docs/2.components/checkbox.md
index 5704e5125c..4970116a55 100644
--- a/docs/content/docs/2.components/checkbox.md
+++ b/docs/content/docs/2.components/checkbox.md
@@ -140,6 +140,20 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.ch
 :::
 ::
 
+### Leading Icon
+
+Use the `leading-icon` prop to display an icon next to the label of the Checkbox.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  leadingIcon: 'i-lucide-tag'
+  label: Check me
+---
+::
+
 ### Color
 
 Use the `color` prop to change the color of the Checkbox.
diff --git a/docs/content/docs/2.components/radio-group.md b/docs/content/docs/2.components/radio-group.md
index 40fc431639..f49cbdeb52 100644
--- a/docs/content/docs/2.components/radio-group.md
+++ b/docs/content/docs/2.components/radio-group.md
@@ -61,8 +61,9 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, leadingIcon?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---
@@ -124,6 +125,35 @@ props:
 ---
 ::
 
+### Icon
+
+Use the `icon` property in the items to display an icon next to the label.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+externalTypes:
+  - RadioGroupItem[]
+props:
+  modelValue: 'system'
+  items:
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'system'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      value: 'light'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      value: 'dark'
+---
+::
+
 ### Legend
 
 Use the `legend` prop to set the legend of the RadioGroup.
diff --git a/playgrounds/nuxt/app/pages/components/checkbox-group.vue b/playgrounds/nuxt/app/pages/components/checkbox-group.vue
index 14033d2b3d..63ab872e94 100644
--- a/playgrounds/nuxt/app/pages/components/checkbox-group.vue
+++ b/playgrounds/nuxt/app/pages/components/checkbox-group.vue
@@ -32,6 +32,19 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
+const viewItems = [
+  { value: 'table', label: 'Table', icon: 'i-lucide-table' },
+  { value: 'board', label: 'Board', icon: 'i-lucide-kanban' },
+  { value: 'calendar', label: 'Calendar', icon: 'i-lucide-calendar' },
+  { value: 'list', label: 'List', icon: 'i-lucide-list' },
+  { value: 'gallery', label: 'Gallery', icon: 'i-lucide-images' },
+  { value: 'map', label: 'Map', icon: 'i-lucide-map' }
+]
 </script>
 
 <template>
@@ -47,6 +60,7 @@ const itemsWithDescription = [
     <UCheckboxGroup :items="items" :default-value="['1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsLiteral" :default-value="['Option 1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <UCheckboxGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />
@@ -63,4 +77,19 @@ const itemsWithDescription = [
       </template>
     </UCheckboxGroup>
   </Matrix>
+
+  <!-- Icon-on-top card grid built on the per-item `icon`, using only `ui` overrides -->
+  <div class="p-4 border-t border-default">
+    <UCheckboxGroup
+      :default-value="['table']"
+      variant="card"
+      indicator="hidden"
+      :items="viewItems"
+      :ui="{
+        fieldset: 'grid grid-cols-3 gap-2 w-96',
+        label: 'flex flex-col items-center gap-1.5',
+        leadingIcon: 'size-6 me-0'
+      }"
+    />
+  </div>
 </template>
diff --git a/playgrounds/nuxt/app/pages/components/checkbox.vue b/playgrounds/nuxt/app/pages/components/checkbox.vue
index 08ed72e0c4..ae6c0f8a5e 100644
--- a/playgrounds/nuxt/app/pages/components/checkbox.vue
+++ b/playgrounds/nuxt/app/pages/components/checkbox.vue
@@ -29,6 +29,7 @@ const value = ref(true)
     <UCheckbox label="Default value" v-bind="props" :default-value="true" />
     <UCheckbox label="Indeterminate" v-bind="props" default-value="indeterminate" />
     <UCheckbox label="Icon" icon="i-lucide-heart" v-bind="props" :model-value="true" />
+    <UCheckbox label="Leading icon" leading-icon="i-lucide-tag" v-bind="props" />
     <UCheckbox label="Required" v-bind="props" required />
     <UCheckbox label="Disabled" v-bind="props" disabled />
     <UCheckbox label="Description" description="This is a description" v-bind="props" />
diff --git a/playgrounds/nuxt/app/pages/components/radio-group.vue b/playgrounds/nuxt/app/pages/components/radio-group.vue
index 447367f1fe..c29abceffb 100644
--- a/playgrounds/nuxt/app/pages/components/radio-group.vue
+++ b/playgrounds/nuxt/app/pages/components/radio-group.vue
@@ -31,6 +31,19 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
+const viewItems = [
+  { value: 'table', label: 'Table', icon: 'i-lucide-table' },
+  { value: 'board', label: 'Board', icon: 'i-lucide-kanban' },
+  { value: 'calendar', label: 'Calendar', icon: 'i-lucide-calendar' },
+  { value: 'list', label: 'List', icon: 'i-lucide-list' },
+  { value: 'gallery', label: 'Gallery', icon: 'i-lucide-images' },
+  { value: 'map', label: 'Map', icon: 'i-lucide-map' }
+]
 </script>
 
 <template>
@@ -46,6 +59,7 @@ const itemsWithDescription = [
     <URadioGroup :items="items" default-value="1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsLiteral" default-value="Option 1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <URadioGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />
@@ -62,4 +76,19 @@ const itemsWithDescription = [
       </template>
     </URadioGroup>
   </Matrix>
+
+  <!-- Icon-on-top card grid built on the per-item `icon`, using only `ui` overrides -->
+  <div class="p-4 border-t border-default">
+    <URadioGroup
+      default-value="table"
+      variant="card"
+      indicator="hidden"
+      :items="viewItems"
+      :ui="{
+        fieldset: 'grid grid-cols-3 gap-2 w-96',
+        label: 'flex flex-col items-center gap-1.5',
+        leadingIcon: 'size-6 me-0'
+      }"
+    />
+  </div>
 </template>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index f14d3f2f7e..05cace429a 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -48,6 +48,11 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
    * @IconifyIcon
    */
   indeterminateIcon?: IconProps['name']
+  /**
+   * The icon displayed next to the label.
+   * @IconifyIcon
+   */
+  leadingIcon?: IconProps['name']
   class?: any
   ui?: Checkbox['slots']
 }
@@ -139,6 +144,7 @@ function onUpdate(value: any) {
 
     <div v-if="(props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <UIcon v-if="props.leadingIcon" :name="props.leadingIcon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <slot name="label" :label="props.label">
           {{ props.label }}
         </slot>
diff --git a/src/runtime/components/CheckboxGroup.vue b/src/runtime/components/CheckboxGroup.vue
index 07c5c523f4..80e40a7cca 100644
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -16,6 +16,11 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
   description?: string
   disabled?: boolean
   value?: string
+  /**
+   * The icon displayed next to the label.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>
   [key: string]: any
@@ -89,6 +94,7 @@ import { useFormField } from '../composables/useFormField'
 import { get, omit } from '../utils'
 import { tv } from '../utils/tv'
 import UCheckbox from './Checkbox.vue'
+import type { IconProps } from './Icon.vue'
 
 const _props = withDefaults(defineProps<CheckboxGroupProps<T, VK>>(), {
   labelKey: 'label',
@@ -187,7 +193,8 @@ function onUpdate(value: any) {
       <UCheckbox
         v-for="item in normalizedItems"
         :key="item.value"
-        v-bind="{ ...item, ...checkboxProps }"
+        v-bind="({ ...omit(item, ['icon']), ...checkboxProps } as any)"
+        :leading-icon="item.icon"
         :color="color"
         :highlight="highlight"
         :size="size"
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index f1b7ab685b..c8723c4353 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -15,8 +15,13 @@ export type RadioGroupItem = RadioGroupValue | {
   description?: string
   disabled?: boolean
   value?: RadioGroupValue
+  /**
+   * The icon displayed next to the label.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
-  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>
+  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'leadingIcon' | 'description'>
   [key: string]: any
 }
 
@@ -100,6 +105,8 @@ import { useForwardProps } from '../composables/useForwardProps'
 import { useFormField } from '../composables/useFormField'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
+import type { IconProps } from './Icon.vue'
+import UIcon from './Icon.vue'
 
 const _props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
   valueKey: 'value' as never,
@@ -213,6 +220,7 @@ function onUpdate(value: any) {
 
         <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
           <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
             <slot name="label" :item="item" :model-value="(props.modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts
index 8a977897d6..1d73424164 100644
--- a/src/theme/checkbox.ts
+++ b/src/theme/checkbox.ts
@@ -9,6 +9,7 @@ export default (options: Required<ModuleOptions>) => ({
     icon: 'shrink-0 size-full',
     wrapper: 'w-full',
     label: 'block font-medium text-default',
+    leadingIcon: 'inline-block align-middle shrink-0 me-1.5',
     description: 'text-muted'
   },
   variants: {
@@ -48,27 +49,32 @@ export default (options: Required<ModuleOptions>) => ({
       xs: {
         base: 'size-3',
         container: 'h-4',
-        wrapper: 'text-xs'
+        wrapper: 'text-xs',
+        leadingIcon: 'size-3'
       },
       sm: {
         base: 'size-3.5',
         container: 'h-4',
-        wrapper: 'text-xs'
+        wrapper: 'text-xs',
+        leadingIcon: 'size-3.5'
       },
       md: {
         base: 'size-4',
         container: 'h-5',
-        wrapper: 'text-sm'
+        wrapper: 'text-sm',
+        leadingIcon: 'size-4'
       },
       lg: {
         base: 'size-4.5',
         container: 'h-5',
-        wrapper: 'text-sm'
+        wrapper: 'text-sm',
+        leadingIcon: 'size-4.5'
       },
       xl: {
         base: 'size-5',
         container: 'h-6',
-        wrapper: 'text-base'
+        wrapper: 'text-base',
+        leadingIcon: 'size-5'
       }
     },
     required: {
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index 640199c1b4..7a18c0df7e 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -11,6 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
     indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
     wrapper: 'w-full',
     label: 'block font-medium text-default',
+    leadingIcon: 'inline-block align-middle shrink-0 me-1.5',
     description: 'text-muted'
   },
   variants: {
@@ -64,7 +65,8 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'size-3',
         item: 'text-xs',
         container: 'h-4',
-        indicator: 'after:size-1'
+        indicator: 'after:size-1',
+        leadingIcon: 'size-3'
       },
       sm: {
         fieldset: 'gap-y-0.5',
@@ -72,7 +74,8 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'size-3.5',
         item: 'text-xs',
         container: 'h-4',
-        indicator: 'after:size-1'
+        indicator: 'after:size-1',
+        leadingIcon: 'size-3.5'
       },
       md: {
         fieldset: 'gap-y-1',
@@ -80,7 +83,8 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'size-4',
         item: 'text-sm',
         container: 'h-5',
-        indicator: 'after:size-1.5'
+        indicator: 'after:size-1.5',
+        leadingIcon: 'size-4'
       },
       lg: {
         fieldset: 'gap-y-1',
@@ -88,7 +92,8 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'size-4.5',
         item: 'text-sm',
         container: 'h-5',
-        indicator: 'after:size-1.5'
+        indicator: 'after:size-1.5',
+        leadingIcon: 'size-4.5'
       },
       xl: {
         fieldset: 'gap-y-1.5',
@@ -96,7 +101,8 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'size-5',
         item: 'text-base',
         container: 'h-6',
-        indicator: 'after:size-2'
+        indicator: 'after:size-2',
+        leadingIcon: 'size-5'
       }
     },
     highlight: {
diff --git a/test/components/CheckboxGroup.spec.ts b/test/components/CheckboxGroup.spec.ts
index d13f5ac115..0145fe6e5c 100644
--- a/test/components/CheckboxGroup.spec.ts
+++ b/test/components/CheckboxGroup.spec.ts
@@ -1,7 +1,8 @@
 import { describe, it, expect, test } from 'vitest'
 import { axe } from 'vitest-axe'
-import { flushPromises, mount } from '@vue/test-utils'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
 import CheckboxGroup from '../../src/runtime/components/CheckboxGroup.vue'
+import Checkbox from '../../src/runtime/components/Checkbox.vue'
 import type { FormInputEvents } from '../../src/module'
 import { renderForm } from '../utils/form'
 import theme from '#build/ui/checkbox-group'
@@ -31,6 +32,7 @@ describe('CheckboxGroup', () => {
     ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with icon', { props: { items: items.map(opt => ({ ...opt, icon: 'i-lucide-rocket' })) } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: ['1'] } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: ['1'] } }]),
@@ -64,6 +66,15 @@ describe('CheckboxGroup', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  it('maps an item icon to the leading icon, not the checkbox indicator icon', async () => {
+    const wrapper = await mountSuspended(CheckboxGroup, {
+      props: { items: [{ value: '1', label: 'Option 1', icon: 'i-lucide-rocket' }] }
+    })
+    const checkbox = wrapper.findComponent(Checkbox) as unknown as VueWrapper<any>
+    expect(checkbox.props('leadingIcon')).toBe('i-lucide-rocket')
+    expect(checkbox.props('icon')).toBeUndefined()
+  })
+
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = mount(CheckboxGroup, { props: { items: ['Option 1', 'Option 2'] } })
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 5c849709a9..f02a50827a 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -30,6 +30,7 @@ describe('RadioGroup', () => {
     ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with icon', { props: { items: items.map(opt => ({ ...opt, icon: 'i-lucide-rocket' })) } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: '1' } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: '1' } }]),
diff --git a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
index 38139da7f2..00ed900fd8 100644
--- a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
@@ -49,7 +49,9 @@ exports[`Checkbox > renders with description correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label
+    </label>
     <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
@@ -62,7 +64,9 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Description slot
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -153,7 +157,9 @@ exports[`Checkbox > renders with label correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -166,7 +172,9 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label slot
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -271,7 +279,9 @@ exports[`Checkbox > renders with required correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">
+      <!--v-if-->Label
+    </label>
     <!--v-if-->
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Checkbox.spec.ts.snap b/test/components/__snapshots__/Checkbox.spec.ts.snap
index 8db481e6aa..216d0adf46 100644
--- a/test/components/__snapshots__/Checkbox.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox.spec.ts.snap
@@ -49,7 +49,9 @@ exports[`Checkbox > renders with description correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label
+    </label>
     <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
@@ -62,7 +64,9 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Description slot
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -153,7 +157,9 @@ exports[`Checkbox > renders with label correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -166,7 +172,9 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">
+      <!--v-if-->Label slot
+    </label>
     <!--v-if-->
   </div>
 </div>"
@@ -271,7 +279,9 @@ exports[`Checkbox > renders with required correctly 1`] = `
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">
+      <!--v-if-->Label
+    </label>
     <!--v-if-->
   </div>
 </div>"
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 17c6235c7e..1d6943e446 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -10,7 +10,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -20,7 +22,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -30,7 +34,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -49,7 +55,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -59,7 +67,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -69,7 +79,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -88,7 +100,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -98,7 +112,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -108,7 +124,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -125,7 +143,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -135,7 +155,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -145,7 +167,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -164,7 +188,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
@@ -174,7 +200,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
@@ -184,7 +212,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -203,7 +233,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -213,7 +245,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -223,7 +257,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -242,7 +278,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
@@ -252,7 +290,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
@@ -262,7 +302,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -281,7 +323,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -291,7 +335,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -301,7 +347,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -318,7 +366,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -328,7 +378,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -338,7 +390,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -355,7 +409,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -365,7 +421,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -375,7 +433,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -392,7 +452,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -402,7 +464,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -412,7 +476,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -421,6 +487,45 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with icon correctly 1`] = `
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
@@ -429,7 +534,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -439,7 +546,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -449,7 +558,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -466,7 +577,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -476,7 +589,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -486,7 +601,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -503,7 +620,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -513,7 +632,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -523,7 +644,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -542,7 +665,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -552,7 +677,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -562,7 +689,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -581,7 +710,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -591,7 +722,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -601,7 +734,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -620,7 +755,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -630,7 +767,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -640,7 +779,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -659,7 +800,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -669,7 +812,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -679,7 +824,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -696,7 +843,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -706,7 +855,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -716,7 +867,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -733,7 +886,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -743,7 +898,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -753,7 +910,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -770,7 +929,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -780,7 +941,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -790,7 +953,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -807,7 +972,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -817,7 +984,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -827,7 +996,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -844,7 +1015,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -854,7 +1027,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -864,7 +1039,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -881,7 +1058,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -891,7 +1070,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -901,7 +1082,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -918,7 +1101,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -928,7 +1113,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -938,7 +1125,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -955,7 +1144,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -965,7 +1156,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -975,7 +1168,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -992,7 +1187,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -1002,7 +1199,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -1012,7 +1211,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1029,7 +1230,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1039,7 +1242,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1049,7 +1254,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1066,7 +1273,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1076,7 +1285,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1086,7 +1297,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1103,7 +1316,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1113,7 +1328,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1123,7 +1340,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1140,7 +1359,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1150,7 +1371,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1160,7 +1383,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1179,7 +1404,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1189,7 +1416,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1199,7 +1428,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1216,7 +1447,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1226,7 +1459,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1236,7 +1471,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1253,7 +1490,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1263,7 +1502,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1273,7 +1514,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1290,7 +1533,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1300,7 +1545,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1310,7 +1557,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1327,7 +1576,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
       <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1337,7 +1588,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1347,7 +1600,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1364,7 +1619,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1374,7 +1631,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1384,7 +1643,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1403,7 +1664,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1413,7 +1676,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1423,7 +1688,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1440,7 +1707,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1450,7 +1719,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1460,7 +1731,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index 34765fe1e9..960b2dcd08 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -10,7 +10,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -20,7 +22,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -30,7 +34,9 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -49,7 +55,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -59,7 +67,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -69,7 +79,9 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -88,7 +100,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -98,7 +112,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -108,7 +124,9 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -125,7 +143,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -135,7 +155,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -145,7 +167,9 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -164,7 +188,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
@@ -174,7 +200,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
@@ -184,7 +212,9 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -203,7 +233,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -213,7 +245,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -223,7 +257,9 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -242,7 +278,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
@@ -252,7 +290,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
@@ -262,7 +302,9 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -281,7 +323,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -291,7 +335,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -301,7 +347,9 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -318,7 +366,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -328,7 +378,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -338,7 +390,9 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -355,7 +409,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -365,7 +421,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -375,7 +433,9 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -392,7 +452,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -402,7 +464,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -412,7 +476,9 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -421,6 +487,45 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with icon correctly 1`] = `
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
@@ -429,7 +534,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -439,7 +546,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -449,7 +558,9 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -466,7 +577,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -476,7 +589,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -486,7 +601,9 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -503,7 +620,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -513,7 +632,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -523,7 +644,9 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -542,7 +665,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -552,7 +677,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -562,7 +689,9 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -581,7 +710,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -591,7 +722,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -601,7 +734,9 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -620,7 +755,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -630,7 +767,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -640,7 +779,9 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -659,7 +800,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -669,7 +812,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -679,7 +824,9 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -696,7 +843,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -706,7 +855,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -716,7 +867,9 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -733,7 +886,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -743,7 +898,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -753,7 +910,9 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -770,7 +929,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -780,7 +941,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
@@ -790,7 +953,9 @@ exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -807,7 +972,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -817,7 +984,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -827,7 +996,9 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -844,7 +1015,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -854,7 +1027,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -864,7 +1039,9 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -881,7 +1058,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -891,7 +1070,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -901,7 +1082,9 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -918,7 +1101,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -928,7 +1113,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -938,7 +1125,9 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -955,7 +1144,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -965,7 +1156,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -975,7 +1168,9 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -992,7 +1187,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -1002,7 +1199,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
@@ -1012,7 +1211,9 @@ exports[`CheckboxGroup > renders with primary variant card highlight correctly 1
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1029,7 +1230,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1039,7 +1242,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1049,7 +1254,9 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1066,7 +1273,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1076,7 +1285,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1086,7 +1297,9 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1103,7 +1316,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1113,7 +1328,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1123,7 +1340,9 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1140,7 +1359,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1150,7 +1371,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1160,7 +1383,9 @@ exports[`CheckboxGroup > renders with primary variant table highlight correctly
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1179,7 +1404,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1189,7 +1416,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1199,7 +1428,9 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1216,7 +1447,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1226,7 +1459,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1236,7 +1471,9 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1253,7 +1490,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1263,7 +1502,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1273,7 +1514,9 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1290,7 +1533,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1300,7 +1545,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1310,7 +1557,9 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1327,7 +1576,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
       <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1337,7 +1588,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1347,7 +1600,9 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1364,7 +1619,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1374,7 +1631,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1384,7 +1643,9 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1403,7 +1664,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1413,7 +1676,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1423,7 +1688,9 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-red">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1440,7 +1707,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1450,7 +1719,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1460,7 +1731,9 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 266edf59b7..a5941fd6c7 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -10,7 +10,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -20,7 +22,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -30,7 +34,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -49,7 +55,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -59,7 +67,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -69,7 +79,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -88,7 +100,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -98,7 +112,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -108,7 +124,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -125,7 +143,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -135,7 +155,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -145,7 +167,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -164,7 +188,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
@@ -174,7 +200,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
@@ -184,7 +212,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -203,7 +233,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -213,7 +245,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -223,7 +257,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -242,7 +278,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
@@ -252,7 +290,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
@@ -262,7 +302,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -281,7 +323,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -291,7 +335,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -301,7 +347,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -318,7 +366,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -328,7 +378,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -338,7 +390,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -355,7 +409,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -365,7 +421,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -375,7 +433,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -392,7 +452,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -402,7 +464,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -412,7 +476,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -421,6 +487,45 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with icon correctly 1`] = `
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="inline-block align-middle shrink-0 me-1.5 size-4"></svg>Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
@@ -429,7 +534,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -439,7 +546,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -449,7 +558,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -466,7 +577,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -476,7 +589,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -486,7 +601,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -503,7 +620,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -513,7 +632,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -523,7 +644,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -542,7 +665,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -552,7 +677,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -562,7 +689,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -581,7 +710,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -591,7 +722,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -601,7 +734,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -620,7 +755,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -630,7 +767,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -640,7 +779,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -659,7 +800,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -669,7 +812,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -679,7 +824,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -696,7 +843,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -706,7 +855,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -716,7 +867,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -733,7 +886,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -743,7 +898,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -753,7 +910,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -770,7 +929,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -780,7 +941,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -790,7 +953,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -807,7 +972,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -817,7 +984,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -827,7 +996,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -844,7 +1015,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -854,7 +1027,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -864,7 +1039,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -881,7 +1058,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -891,7 +1070,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -901,7 +1082,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -918,7 +1101,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -928,7 +1113,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -938,7 +1125,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -955,7 +1144,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -965,7 +1156,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -975,7 +1168,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -992,7 +1187,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -1002,7 +1199,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -1012,7 +1211,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1029,7 +1230,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1039,7 +1242,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1049,7 +1254,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1066,7 +1273,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1076,7 +1285,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1086,7 +1297,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1103,7 +1316,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1113,7 +1328,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1123,7 +1340,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1140,7 +1359,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1150,7 +1371,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1160,7 +1383,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1179,7 +1404,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1189,7 +1416,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1199,7 +1428,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1216,7 +1447,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1226,7 +1459,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1236,7 +1471,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1253,7 +1490,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1263,7 +1502,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1273,7 +1514,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1290,7 +1533,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1300,7 +1545,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1310,7 +1557,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1327,7 +1576,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
       <div data-slot="container" class="flex items-center h-6"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1337,7 +1588,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1347,7 +1600,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1364,7 +1619,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1374,7 +1631,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1384,7 +1643,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1403,7 +1664,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1413,7 +1676,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1423,7 +1688,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1440,7 +1707,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1450,7 +1719,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1460,7 +1731,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index 4405aae944..6856412314 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -10,7 +10,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -20,7 +22,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -30,7 +34,9 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -49,7 +55,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -59,7 +67,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -69,7 +79,9 @@ exports[`RadioGroup > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -88,7 +100,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -98,7 +112,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -108,7 +124,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -125,7 +143,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -135,7 +155,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -145,7 +167,9 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -164,7 +188,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
@@ -174,7 +200,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
@@ -184,7 +212,9 @@ exports[`RadioGroup > renders with description correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -203,7 +233,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -213,7 +245,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -223,7 +257,9 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Description slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -242,7 +278,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
@@ -252,7 +290,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
@@ -262,7 +302,9 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -281,7 +323,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -291,7 +335,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -301,7 +347,9 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -318,7 +366,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -328,7 +378,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -338,7 +390,9 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -355,7 +409,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -365,7 +421,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -375,7 +433,9 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -392,7 +452,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -402,7 +464,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -412,7 +476,9 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -421,6 +487,45 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with icon correctly 1`] = `
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default"><span class="iconify i-lucide:rocket inline-block align-middle shrink-0 me-1.5 size-4" aria-hidden="true" data-slot="leadingIcon"></span>Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
@@ -429,7 +534,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -439,7 +546,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -449,7 +558,9 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -466,7 +577,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -476,7 +589,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -486,7 +601,9 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -503,7 +620,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -513,7 +632,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -523,7 +644,9 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -542,7 +665,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -552,7 +677,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -562,7 +689,9 @@ exports[`RadioGroup > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -581,7 +710,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -591,7 +722,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -601,7 +734,9 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Label slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -620,7 +755,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -630,7 +767,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -640,7 +779,9 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -659,7 +800,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -669,7 +812,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -679,7 +824,9 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Legend slot
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -696,7 +843,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -706,7 +855,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -716,7 +867,9 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -733,7 +886,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -743,7 +898,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -753,7 +910,9 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -770,7 +929,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -780,7 +941,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
@@ -790,7 +953,9 @@ exports[`RadioGroup > renders with neutral variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -807,7 +972,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -817,7 +984,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -827,7 +996,9 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -844,7 +1015,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -854,7 +1027,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -864,7 +1039,9 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -881,7 +1058,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -891,7 +1070,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -901,7 +1082,9 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -918,7 +1101,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -928,7 +1113,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
@@ -938,7 +1125,9 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -955,7 +1144,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -965,7 +1156,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -975,7 +1168,9 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -992,7 +1187,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -1002,7 +1199,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
@@ -1012,7 +1211,9 @@ exports[`RadioGroup > renders with primary variant card highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1029,7 +1230,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1039,7 +1242,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1049,7 +1254,9 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1066,7 +1273,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1076,7 +1285,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1086,7 +1297,9 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1103,7 +1316,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1113,7 +1328,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1123,7 +1340,9 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1140,7 +1359,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1150,7 +1371,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </p>
         <!--v-if-->
       </div>
     </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
@@ -1160,7 +1383,9 @@ exports[`RadioGroup > renders with primary variant table highlight correctly 1`]
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
-        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </p>
         <!--v-if-->
       </div>
     </label>
@@ -1179,7 +1404,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1189,7 +1416,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1199,7 +1428,9 @@ exports[`RadioGroup > renders with required correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1216,7 +1447,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1226,7 +1459,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1236,7 +1471,9 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1253,7 +1490,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1263,7 +1502,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1273,7 +1514,9 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1290,7 +1533,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1300,7 +1545,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1310,7 +1557,9 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1327,7 +1576,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
       <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1337,7 +1588,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1347,7 +1600,9 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1364,7 +1619,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
       <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1374,7 +1631,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1384,7 +1643,9 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1403,7 +1664,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1413,7 +1676,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1423,7 +1688,9 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1440,7 +1707,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
       <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 1
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1450,7 +1719,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 2
+        </label>
         <!--v-if-->
       </div>
     </div>
@@ -1460,7 +1731,9 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">
+          <!--v-if-->Option 3
+        </label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index c75f5e1f75..d1a5149208 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -397,7 +397,9 @@ exports[`Table > renders with columns correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -661,7 +663,9 @@ exports[`Table > renders with empty slot correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1495,7 +1499,9 @@ exports[`Table > renders with loading slot correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1559,7 +1565,9 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1992,7 +2000,9 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 5a1dff536c..5c444f0380 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -397,7 +397,9 @@ exports[`Table > renders with columns correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -661,7 +663,9 @@ exports[`Table > renders with empty slot correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1495,7 +1499,9 @@ exports[`Table > renders with loading slot correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1559,7 +1565,9 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>
@@ -1992,7 +2000,9 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">
+                <!--v-if-->Select all
+              </label>
               <!--v-if-->
             </div>
           </div>