diff --git a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
index c16170933..83e514342 100644
--- a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
+++ b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
@@ -42,23 +42,23 @@
                     <label
                       class="leafygreen-ui-nf64md"
                       data-lgid="lg-label"
-                      for="select-191"
-                      id="select-190-label"
+                      for="select-227"
+                      id="select-226-label"
                     >
                       Project Cloning Method
                     </label>
                   </div>
                   <button
-                    aria-controls="select-190-menu"
-                    aria-describedby="select-190-description"
+                    aria-controls="select-226-menu"
+                    aria-describedby="select-226-description"
                     aria-disabled="false"
                     aria-expanded="false"
                     aria-invalid="false"
-                    aria-labelledby="select-190-label"
+                    aria-labelledby="select-226-label"
                     class="lg-ui-button-0000 leafygreen-ui-1p6i2zy"
                     data-lgid="lg-button"
                     data-testid="leafygreen-ui-select-menubutton"
-                    id="select-191"
+                    id="select-227"
                     type="button"
                     value="legacy-ssh"
                   >
@@ -174,34 +174,41 @@
                           class="css-cjejq9-ElementWrapper ee4bs9n0"
                         >
                           <div
-                            class="css-1kbcljo-StyledTextInput eevpusu6 leafygreen-ui-90q1a7"
+                            class="leafygreen-ui-1br9h7w css-1kbcljo-StyledTextInput eevpusu6"
+                            data-lgid="lg-text_input"
                           >
                             <div
-                              class="leafygreen-ui-e3fvh5"
+                              class="leafygreen-ui-au9iil"
                             >
                               <label
-                                class="leafygreen-ui-t01kw4"
-                                for="textinput-4"
+                                class="leafygreen-ui-1qjbbjd"
+                                data-lgid="lg-label"
+                                data-testid="lg-form_field-label"
+                                for="lg-form-field-input-231"
+                                id="lg-form-field-label-228"
                               >
                                 key
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-lzja97"
+                              class="leafygreen-ui-95c1iv"
                             >
-                              <input
-                                aria-invalid="false"
-                                aria-label="key"
-                                autocomplete="on"
-                                class="leafygreen-ui-1kmfbzh"
-                                id="textinput-4"
-                                required=""
-                                type="text"
-                                value="Sample Input"
-                              />
                               <div
-                                class="lg-ui-icon-selector-0000 leafygreen-ui-11c7q5r"
-                              />
+                                class="leafygreen-ui-1ago99h"
+                              >
+                                <input
+                                  aria-describedby=""
+                                  aria-disabled="false"
+                                  aria-invalid="false"
+                                  aria-labelledby="lg-form-field-label-228"
+                                  autocomplete="on"
+                                  class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                                  id="lg-form-field-input-231"
+                                  required=""
+                                  type="text"
+                                  value="Sample Input"
+                                />
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -214,34 +221,41 @@
                           class="css-cjejq9-ElementWrapper ee4bs9n0"
                         >
                           <div
-                            class="css-1kbcljo-StyledTextInput eevpusu6 leafygreen-ui-90q1a7"
+                            class="leafygreen-ui-1br9h7w css-1kbcljo-StyledTextInput eevpusu6"
+                            data-lgid="lg-text_input"
                           >
                             <div
-                              class="leafygreen-ui-e3fvh5"
+                              class="leafygreen-ui-au9iil"
                             >
                               <label
-                                class="leafygreen-ui-t01kw4"
-                                for="textinput-5"
+                                class="leafygreen-ui-1qjbbjd"
+                                data-lgid="lg-label"
+                                data-testid="lg-form_field-label"
+                                for="lg-form-field-input-235"
+                                id="lg-form-field-label-232"
                               >
                                 value
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-lzja97"
+                              class="leafygreen-ui-95c1iv"
                             >
-                              <input
-                                aria-invalid="false"
-                                aria-label="value"
-                                autocomplete="on"
-                                class="leafygreen-ui-1kmfbzh"
-                                id="textinput-5"
-                                required=""
-                                type="text"
-                                value="Sample Input"
-                              />
                               <div
-                                class="lg-ui-icon-selector-0000 leafygreen-ui-11c7q5r"
-                              />
+                                class="leafygreen-ui-1ago99h"
+                              >
+                                <input
+                                  aria-describedby=""
+                                  aria-disabled="false"
+                                  aria-invalid="false"
+                                  aria-labelledby="lg-form-field-label-232"
+                                  autocomplete="on"
+                                  class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                                  id="lg-form-field-input-235"
+                                  required=""
+                                  type="text"
+                                  value="Sample Input"
+                                />
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -298,13 +312,13 @@
                 >
                   <label
                     class="leafygreen-ui-1fi5x3a"
-                    for="textarea-192"
+                    for="textarea-236"
                   >
                     Valid Projects
                   </label>
                   <textarea
                     class="leafygreen-ui-18em0fn"
-                    id="textarea-192"
+                    id="textarea-236"
                     rows="5"
                     title="Valid Projects"
                   />
diff --git a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
index 9d8996ef8..7591212c1 100644
--- a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
+++ b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
@@ -37,16 +37,16 @@
                 >
                   <label
                     class="leafygreen-ui-75mjfl"
-                    for="checkbox-193"
-                    id="checkbox-193-label"
+                    for="checkbox-237"
+                    id="checkbox-237-label"
                   >
                     <input
                       aria-checked="false"
                       aria-disabled="false"
                       aria-label="checkbox"
-                      aria-labelledby="checkbox-193-label"
+                      aria-labelledby="checkbox-237-label"
                       class="lg-ui-input-0000 leafygreen-ui-1a1e5kp"
-                      id="checkbox-193"
+                      id="checkbox-237"
                       type="checkbox"
                     />
                     <div
@@ -94,16 +94,16 @@
                 >
                   <label
                     class="leafygreen-ui-75mjfl"
-                    for="checkbox-194"
-                    id="checkbox-194-label"
+                    for="checkbox-238"
+                    id="checkbox-238-label"
                   >
                     <input
                       aria-checked="false"
                       aria-disabled="false"
                       aria-label="checkbox"
-                      aria-labelledby="checkbox-194-label"
+                      aria-labelledby="checkbox-238-label"
                       class="lg-ui-input-0000 leafygreen-ui-1a1e5kp"
-                      id="checkbox-194"
+                      id="checkbox-238"
                       type="checkbox"
                     />
                     <div
@@ -151,16 +151,16 @@
                 >
                   <label
                     class="leafygreen-ui-75mjfl"
-                    for="checkbox-195"
-                    id="checkbox-195-label"
+                    for="checkbox-239"
+                    id="checkbox-239-label"
                   >
                     <input
                       aria-checked="false"
                       aria-disabled="false"
                       aria-label="checkbox"
-                      aria-labelledby="checkbox-195-label"
+                      aria-labelledby="checkbox-239-label"
                       class="lg-ui-input-0000 leafygreen-ui-1a1e5kp"
-                      id="checkbox-195"
+                      id="checkbox-239"
                       type="checkbox"
                     />
                     <div
@@ -208,17 +208,17 @@
                 >
                   <label
                     class="leafygreen-ui-75mjfl"
-                    for="checkbox-196"
-                    id="checkbox-196-label"
+                    for="checkbox-240"
+                    id="checkbox-240-label"
                   >
                     <input
                       aria-checked="true"
                       aria-disabled="false"
                       aria-label="checkbox"
-                      aria-labelledby="checkbox-196-label"
+                      aria-labelledby="checkbox-240-label"
                       checked=""
                       class="lg-ui-input-0000 leafygreen-ui-1a1e5kp"
-                      id="checkbox-196"
+                      id="checkbox-240"
                       type="checkbox"
                     />
                     <div
@@ -276,7 +276,7 @@
                     >
                       <input
                         aria-checked="false"
-                        aria-describedby="lg-197"
+                        aria-describedby="lg-241"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
                         id="radio-group--0"
@@ -303,7 +303,7 @@
                     >
                       <input
                         aria-checked="false"
-                        aria-describedby="lg-198"
+                        aria-describedby="lg-242"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
                         id="radio-group--1"
diff --git a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example3.storyshot b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example3.storyshot
index 598e26087..3ca87380a 100644
--- a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example3.storyshot
+++ b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example3.storyshot
@@ -37,17 +37,17 @@
                 >
                   <label
                     class="leafygreen-ui-75mjfl"
-                    for="checkbox-199"
-                    id="checkbox-199-label"
+                    for="checkbox-243"
+                    id="checkbox-243-label"
                   >
                     <input
                       aria-checked="true"
                       aria-disabled="false"
                       aria-label="checkbox"
-                      aria-labelledby="checkbox-199-label"
+                      aria-labelledby="checkbox-243-label"
                       checked=""
                       class="lg-ui-input-0000 leafygreen-ui-1a1e5kp"
-                      id="checkbox-199"
+                      id="checkbox-243"
                       type="checkbox"
                     />
                     <div