diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
index a9597d5a6a..774da15558 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
@@ -21,7 +21,7 @@ export const Country: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -37,6 +37,7 @@ export const Country: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              inputId={name}
             />
           )}
         />
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx
index 56fd5398ee..9afd999add 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx
@@ -19,13 +19,14 @@ export const Email: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="text"
           placeholder="Email"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps, pattern: /^\S+@\S+$/i })}
         />
         {requiredFromProps && errors[name] && <Error />}
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx
index 4ed1dd2d67..9390356405 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx
@@ -19,12 +19,13 @@ export const Number: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="number"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
index ea6656dd09..61ae4cb584 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
@@ -20,7 +20,7 @@ export const Select: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -36,6 +36,7 @@ export const Select: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              inputId={name}
             />
           )}
         />
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
index 74367b7f18..d776652153 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
@@ -21,7 +21,7 @@ export const State: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -37,6 +37,7 @@ export const State: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              id={name}
             />
           )}
         />
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx
index 6950678302..f295425292 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx
@@ -19,12 +19,13 @@ export const Text: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="text"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}
diff --git a/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx b/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx
index 7f9eff0a26..a50f22ef13 100644
--- a/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx
@@ -20,12 +20,13 @@ export const Textarea: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <textarea
           rows={rows}
           className={classes.textarea}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}