Update snapshot

frontend/test/internal/__snapshots__/components.unit.spec.js.snap

@@ -481,8 +481,14 @@ exports[`Radio should render "default" correctly 1`] = `
   className="flex text-bold h3"
 >
   <li
-    className="flex align-center cursor-pointer mt1 mr2 text-brand-hover"
+    className="flex align-center cursor-pointer mr2 text-brand-hover pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={true}
@@ -499,8 +505,14 @@ exports[`Radio should render "default" correctly 1`] = `
     </span>
   </li>
   <li
-    className="flex align-center cursor-pointer mt1 mr2 text-brand-hover"
+    className="flex align-center cursor-pointer mr2 text-brand-hover pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={false}
@@ -524,19 +536,25 @@ exports[`Radio should render "show buttons" correctly 1`] = `
   className="flex"
 >
   <li
-    className="flex align-center cursor-pointer mt1 mr2"
+    className="flex align-center cursor-pointer mr2 pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={true}
       className="Form-radio"
-      id="radio-2-0"
-      name="radio-2"
+      id="radio-3-0"
+      name="radio-3"
       type="radio"
       value={0}
     />
     <label
-      htmlFor="radio-2-0"
+      htmlFor="radio-3-0"
     />
     <span
       className="text-brand"
@@ -545,19 +563,80 @@ exports[`Radio should render "show buttons" correctly 1`] = `
     </span>
   </li>
   <li
-    className="flex align-center cursor-pointer mt1 mr2"
+    className="flex align-center cursor-pointer mr2 pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={false}
       className="Form-radio"
-      id="radio-2-1"
-      name="radio-2"
+      id="radio-3-1"
+      name="radio-3"
       type="radio"
       value={1}
     />
     <label
-      htmlFor="radio-2-1"
+      htmlFor="radio-3-1"
+    />
+    <span
+      className=""
+    >
+      Gizmo
+    </span>
+  </li>
+</ul>
+`;
+
+exports[`Radio should render "underlined" correctly 1`] = `
+<ul
+  className="flex text-bold h3"
+>
+  <li
+    className="flex align-center cursor-pointer mr2 text-brand-hover py2"
+    onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": "3px solid transparent",
+        "borderColor": "#509EE3",
+      }
+    }
+  >
+    <input
+      checked={true}
+      className="Form-radio"
+      id="radio-2-0"
+      name="radio-2"
+      type="radio"
+      value={0}
+    />
+    <span
+      className="text-brand"
+    >
+      Gadget
+    </span>
+  </li>
+  <li
+    className="flex align-center cursor-pointer mr2 text-brand-hover py2"
+    onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": "3px solid transparent",
+        "borderColor": "transparent",
+      }
+    }
+  >
+    <input
+      checked={false}
+      className="Form-radio"
+      id="radio-2-1"
+      name="radio-2"
+      type="radio"
+      value={1}
     />
     <span
       className=""
@@ -573,19 +652,25 @@ exports[`Radio should render "vertical" correctly 1`] = `
   className="flex flex-column"
 >
   <li
-    className="flex align-center cursor-pointer mt1 mr2"
+    className="flex align-center cursor-pointer mr2 pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={true}
       className="Form-radio"
-      id="radio-3-0"
-      name="radio-3"
+      id="radio-4-0"
+      name="radio-4"
       type="radio"
       value={0}
     />
     <label
-      htmlFor="radio-3-0"
+      htmlFor="radio-4-0"
     />
     <span
       className="text-brand"
@@ -594,19 +679,25 @@ exports[`Radio should render "vertical" correctly 1`] = `
     </span>
   </li>
   <li
-    className="flex align-center cursor-pointer mt1 mr2"
+    className="flex align-center cursor-pointer mr2 pt1"
     onClick={[Function]}
+    style={
+      Object {
+        "borderBottom": undefined,
+        "borderColor": "transparent",
+      }
+    }
   >
     <input
       checked={false}
       className="Form-radio"
-      id="radio-3-1"
-      name="radio-3"
+      id="radio-4-1"
+      name="radio-4"
       type="radio"
       value={1}
     />
     <label
-      htmlFor="radio-3-1"
+      htmlFor="radio-4-1"
     />
     <span
       className=""