diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index e10054bcce..bbe7092835 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -115,7 +115,7 @@ provide(formFieldInjectionKey, computed(() => ({
   <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="props.label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <Label :id="`${ariaId}-label`" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="props.label">
             {{ props.label }}
           </slot>
diff --git a/src/runtime/components/Listbox.vue b/src/runtime/components/Listbox.vue
index 5ffb54f6d2..6d6550f9f2 100644
--- a/src/runtime/components/Listbox.vue
+++ b/src/runtime/components/Listbox.vue
@@ -210,7 +210,7 @@ const virtualizerProps = toRef(() => {
 })
 const inputProps = toRef(() => defu(typeof props.filter === 'object' ? props.filter : {}, { placeholder: t('listbox.search'), variant: 'none' }) as Omit<InputProps, 'modelValue' | 'defaultValue'>)
 
-const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props, { bind: false })
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props)
 
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ListboxItem, index: number }>({
   props: {
@@ -375,7 +375,7 @@ const filteredItems = computed(() => filteredGroups.value.flatMap(group => group
       />
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" :aria-labelledby="id !== undefined ? `${id}-label` : undefined">
       <div v-if="props.loading" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
         <slot name="loading">
           <UIcon :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: props.ui?.loadingIcon })" />
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index 8e35b4b2d9..b1d59f6a6e 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -24,7 +24,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -55,7 +55,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -70,7 +70,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -105,7 +105,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -120,7 +120,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -155,7 +155,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -170,7 +170,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -201,7 +201,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -216,7 +216,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -247,7 +247,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -262,7 +262,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -293,7 +293,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -308,7 +308,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -339,7 +339,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -354,7 +354,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -389,7 +389,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -404,7 +404,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -439,7 +439,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -454,7 +454,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -485,7 +485,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -500,7 +500,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -539,7 +539,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -554,7 +554,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -585,7 +585,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -600,7 +600,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -631,7 +631,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -646,7 +646,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -677,7 +677,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -692,7 +692,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -723,7 +723,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -738,7 +738,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -770,7 +770,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -785,7 +785,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -820,7 +820,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -835,7 +835,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -866,7 +866,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -881,7 +881,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -912,7 +912,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
     <form id="v-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" id="v-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -927,7 +927,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" id="v-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index 7928e19145..1839c98f5e 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -24,7 +24,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -57,7 +57,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -72,7 +72,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -109,7 +109,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -124,7 +124,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -161,7 +161,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -176,7 +176,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -209,7 +209,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -224,7 +224,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -257,7 +257,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -272,7 +272,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -305,7 +305,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -320,7 +320,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -353,7 +353,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -368,7 +368,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -405,7 +405,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -420,7 +420,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -457,7 +457,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -472,7 +472,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -505,7 +505,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -520,7 +520,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -561,7 +561,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -576,7 +576,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -609,7 +609,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -624,7 +624,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -657,7 +657,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -672,7 +672,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -705,7 +705,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -720,7 +720,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -753,7 +753,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -768,7 +768,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -802,7 +802,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -817,7 +817,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -854,7 +854,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -869,7 +869,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -902,7 +902,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -917,7 +917,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -950,7 +950,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
     <form id="v-0-0-0" method="post" class="space-y-5" data-slot="form">
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" id="v-0-0-1-label" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -965,7 +965,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
       </div>
       <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
-          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" id="v-0-0-2-label" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
diff --git a/test/components/__snapshots__/FormField-vue.spec.ts.snap b/test/components/__snapshots__/FormField-vue.spec.ts.snap
index 345d79c993..8e249fcd66 100644
--- a/test/components/__snapshots__/FormField-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FormField-vue.spec.ts.snap
@@ -123,7 +123,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 exports[`FormField > renders with label and description correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -137,7 +137,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 exports[`FormField > renders with label slot correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -151,7 +151,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
 exports[`FormField > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="text-sm flex justify-between place-items-baseline gap-2">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -165,7 +165,7 @@ exports[`FormField > renders with orientation horizontal correctly 1`] = `
 exports[`FormField > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -179,7 +179,7 @@ exports[`FormField > renders with orientation vertical correctly 1`] = `
 exports[`FormField > renders with required correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -193,7 +193,7 @@ exports[`FormField > renders with required correctly 1`] = `
 exports[`FormField > renders with size lg correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -207,7 +207,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
 exports[`FormField > renders with size md correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -221,7 +221,7 @@ exports[`FormField > renders with size md correctly 1`] = `
 exports[`FormField > renders with size sm correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -235,7 +235,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
 exports[`FormField > renders with size xl correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-base">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -249,7 +249,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
 exports[`FormField > renders with size xs correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
diff --git a/test/components/__snapshots__/FormField.spec.ts.snap b/test/components/__snapshots__/FormField.spec.ts.snap
index 345d79c993..8e249fcd66 100644
--- a/test/components/__snapshots__/FormField.spec.ts.snap
+++ b/test/components/__snapshots__/FormField.spec.ts.snap
@@ -123,7 +123,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 exports[`FormField > renders with label and description correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -137,7 +137,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 exports[`FormField > renders with label slot correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -151,7 +151,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
 exports[`FormField > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="text-sm flex justify-between place-items-baseline gap-2">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -165,7 +165,7 @@ exports[`FormField > renders with orientation horizontal correctly 1`] = `
 exports[`FormField > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -179,7 +179,7 @@ exports[`FormField > renders with orientation vertical correctly 1`] = `
 exports[`FormField > renders with required correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -193,7 +193,7 @@ exports[`FormField > renders with required correctly 1`] = `
 exports[`FormField > renders with size lg correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -207,7 +207,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
 exports[`FormField > renders with size md correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -221,7 +221,7 @@ exports[`FormField > renders with size md correctly 1`] = `
 exports[`FormField > renders with size sm correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -235,7 +235,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
 exports[`FormField > renders with size xl correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-base">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
@@ -249,7 +249,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
 exports[`FormField > renders with size xs correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
-    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" id="v-0-0-label" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
     <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
diff --git a/test/components/__snapshots__/Listbox-vue.spec.ts.snap b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
index fb1c41e935..af8ee738fe 100644
--- a/test/components/__snapshots__/Listbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
@@ -216,7 +216,7 @@ exports[`Listbox > renders with highlight neutral correctly 1`] = `
 exports[`Listbox > renders with id correctly 1`] = `
 "<div dir="ltr" id="id" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" aria-labelledby="id-label" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><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="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
diff --git a/test/components/__snapshots__/Listbox.spec.ts.snap b/test/components/__snapshots__/Listbox.spec.ts.snap
index ddbaff2b59..b938d20d19 100644
--- a/test/components/__snapshots__/Listbox.spec.ts.snap
+++ b/test/components/__snapshots__/Listbox.spec.ts.snap
@@ -216,7 +216,7 @@ exports[`Listbox > renders with highlight neutral correctly 1`] = `
 exports[`Listbox > renders with id correctly 1`] = `
 "<div dir="ltr" id="id" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" aria-labelledby="id-label" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>