dikaioai
diff --git a/‎.changeset/serious-years-fetch.md‎
Lines changed: 2 additions & 0 deletions b/‎.changeset/serious-years-fetch.md‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎packages/ui/src/common/phone-number-field/index.tsx‎
Lines changed: 3 additions & 1 deletion b/‎packages/ui/src/common/phone-number-field/index.tsx‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎packages/ui/src/primitives/field.tsx‎
Lines changed: 1 addition & 1 deletion b/‎packages/ui/src/primitives/field.tsx‎
Lines changed: 1 addition & 1 deletion
@@ -0,0 +1,2 @@
+---
+---
@@ -40,6 +40,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
   const { translateError } = useLocalizations();
   const [isOpen, setOpen] = React.useState(false);
   const [selectedCountry, setSelectedCountry] = React.useState(countryOptions[0]);
+  const id = React.useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
   const commandListRef = React.useRef<HTMLDivElement>(null);
@@ -95,7 +96,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
     >
       <Field.Root>
         <Common.Label asChild>
-          <Field.Label>
+          <Field.Label htmlFor={id}>
             {label}{' '}
             {alternativeFieldTrigger ? (
               <Field.LabelEnd>{alternativeFieldTrigger}</Field.LabelEnd>
@@ -200,6 +201,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                 <input
                   ref={mergeRefs([forwardedRef, inputRef])}
                   type='tel'
+                  id={id}
                   maxLength={25}
                   value={formattedNumber}
                   onPaste={handlePaste}
 
@@ -31,7 +31,7 @@ export const Label = React.forwardRef(function Label(
     children,
     visuallyHidden,
     ...props
-  }: React.HTMLAttributes<HTMLLabelElement> & { visuallyHidden?: boolean },
+  }: React.HTMLAttributes<HTMLLabelElement> & { htmlFor?: string; visuallyHidden?: boolean },
   forwardedRef: React.ForwardedRef<HTMLLabelElement>,
 ) {
   return (