diff --git a/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue b/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
index 1cbfed13..93d3ff65 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
@@ -11,6 +11,7 @@ import { Label } from '@/lib/registry/default/ui/label'
 
 <template>
   <NumberField
+    id="balance"
     :default-value="1500"
     :format-options="{
       style: 'currency',
@@ -19,7 +20,7 @@ import { Label } from '@/lib/registry/default/ui/label'
       currencySign: 'accounting',
     }"
   >
-    <Label>Balance</Label>
+    <Label for="balance">Balance</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue b/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
index fcc7e35d..abbfc115 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
@@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/default/ui/label'
 
 <template>
   <NumberField
+    id="number"
     :default-value="5"
     :format-options="{
       signDisplay: 'exceptZero',
       minimumFractionDigits: 1,
     }"
   >
-    <Label>Number</Label>
+    <Label for="number">Number</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue b/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
index f5a9896e..0547fba7 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
@@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
-  <NumberField :default-value="18" :min="0">
-    <Label>Age</Label>
+  <NumberField id="age" :default-value="18" :min="0">
+    <Label for="age">Age</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue b/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
index 43af9016..33ad1852 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
@@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
-  <NumberField :default-value="18" :min="0" disabled>
-    <Label>Age</Label>
+  <NumberField id="age-disabled" :default-value="18" disabled>
+    <Label for="age-disabled">Age</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue b/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
index fabd5f8e..7cd3b81a 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
@@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/default/ui/label'
 
 <template>
   <NumberField
+    id="percent"
     :default-value="0.05"
     :step="0.01"
     :format-options="{
       style: 'percent',
     }"
   >
-    <Label>Percent</Label>
+    <Label for="percent">Percent</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
index d7842ad3..cf493deb 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
@@ -2,10 +2,10 @@
 import { type Ref, ref, watch } from 'vue'
 
 import {
-  Calendar as CalendarIcon,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-vue-next'
+  CalendarIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from '@radix-icons/vue'
 import {
   CalendarDate,
   type DateValue,
@@ -153,7 +153,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('first', -1)"
               >
-                <ChevronLeft class="h-4 w-4" />
+                <ChevronLeftIcon class="h-4 w-4" />
               </button>
               <div :class="cn('text-sm font-medium')">
                 {{
@@ -171,7 +171,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('first', 1)"
               >
-                <ChevronRight class="h-4 w-4" />
+                <ChevronRightIcon class="h-4 w-4" />
               </button>
             </div>
             <RangeCalendarGrid>
@@ -219,7 +219,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('second', -1)"
               >
-                <ChevronLeft class="h-4 w-4" />
+                <ChevronLeftIcon class="h-4 w-4" />
               </button>
               <div :class="cn('text-sm font-medium')">
                 {{
@@ -238,7 +238,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('second', 1)"
               >
-                <ChevronRight class="h-4 w-4" />
+                <ChevronRightIcon class="h-4 w-4" />
               </button>
             </div>
             <RangeCalendarGrid>
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
index cc1432f7..ec078919 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
@@ -11,6 +11,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 
 <template>
   <NumberField
+    id="balance"
     :default-value="1500"
     :format-options="{
       style: 'currency',
@@ -19,7 +20,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
       currencySign: 'accounting',
     }"
   >
-    <Label>Balance</Label>
+    <Label for="balance">Balance</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
index 6299ba61..dc702bdc 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
@@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 
 <template>
   <NumberField
+    id="number"
     :default-value="5"
     :format-options="{
       signDisplay: 'exceptZero',
       minimumFractionDigits: 1,
     }"
   >
-    <Label>Number</Label>
+    <Label for="number">Number</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
index 9a0172dd..0e0d05e0 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
@@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
-  <NumberField :default-value="18" :min="0">
-    <Label>Age</Label>
+  <NumberField id="age" :default-value="18" :min="0">
+    <Label for="age">Age</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
index 166d22ab..4a54e230 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
@@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
-  <NumberField :default-value="18" disabled>
-    <Label>Age</Label>
+  <NumberField id="age-disabled" :default-value="18" disabled>
+    <Label for="age-disabled">Age</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
index 47259a54..1f063577 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
@@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 
 <template>
   <NumberField
+    id="percent"
     :default-value="0.05"
     :step="0.01"
     :format-options="{
       style: 'percent',
     }"
   >
-    <Label>Percent</Label>
+    <Label for="percent">Percent</Label>
     <NumberFieldContent>
       <NumberFieldDecrement />
       <NumberFieldInput />