Finish design

assets/icon-checkbox-checked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1217 15.6557 10.039 15.6004 9.96937 15.5306L7.71937 13.2806C7.57864 13.1399 7.49958 12.949 7.49958 12.75C7.49958 12.551 7.57864 12.3601 7.71937 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44902 11.9996 8.63989 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.2891 9.14969 15.3718 9.09442 15.4628 9.0567C15.5539 9.01899 15.6515 8.99958 15.75 8.99958C15.8485 8.99958 15.9461 9.01899 16.0372 9.0567C16.1282 9.09442 16.2109 9.14969 16.2806 9.21937C16.3503 9.28906 16.4056 9.37178 16.4433 9.46283C16.481 9.55387 16.5004 9.65145 16.5004 9.75C16.5004 9.84855 16.481 9.94613 16.4433 10.0372C16.4056 10.1282 16.3503 10.2109 16.2806 10.2806Z" fill="#0C7D69"/>
+</svg>

assets/icon-checkbox-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM19.5 19.5H4.5V4.5H19.5V19.5Z" fill="#86A2A5"/>
+</svg>

package-lock.json

@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-radio-group": "^1.1.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
@@ -528,6 +529,36 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
+      "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",

package.json

@@ -5,6 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/app.jsx

@@ -1,6 +1,20 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
+import * as Checkbox from "@radix-ui/react-checkbox";
+
+import icon_checkbox_checked from "../assets/icon-checkbox-checked.svg";
+import icon_checkbox_unchecked from "../assets/icon-checkbox-unchecked.svg";
+import { useState } from "react";
 
 const InputField = ({ label, type = "text", required = false, ...props }) => {
+  const inputProps = {
+    className:
+      "block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600",
+    name: label.toLowerCase().replace(/ /g, "_"),
+    required: required,
+    autoComplete: "off",
+    ...props,
+  };
+
   return (
     <label className="group block cursor-pointer space-y-100">
       <div className="space-x-100">
@@ -9,19 +23,18 @@ const InputField = ({ label, type = "text", required = false, ...props }) => {
         </span>
         {required && <span className="text-body-sm text-green-600">*</span>}
       </div>
-      <input
+      {type == "textarea" ? (
-        className="block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600"
+        <textarea {...inputProps} />
-        name={label.toLowerCase().replace(/ /g, "_")}
+      ) : (
-        required={required}
+        <input type={type} {...inputProps} />
-        type={type}
+      )}
-        autoComplete="off"
-        {...props}
-      />
     </label>
   );
 };
 
 export default () => {
+  const [checkbox, setCheckbox] = useState(false);
+
   return (
     <div className="min-h-dvh bg-green-200 px-200 py-400">
       <div className="rounded-2xl bg-white p-300 text-grey-900">
@@ -58,7 +71,36 @@ export default () => {
                 ))}
               </RadioGroup.Root>
             </div>
+
+            <InputField label="Message" type="textarea" rows="4" required />
           </div>
+
+          <div className="my-500 flex items-center">
+            <Checkbox.Root
+              className="flex-shrink-0"
+              checked={checkbox}
+              onCheckedChange={setCheckbox}
+              required
+              id="c1"
+            >
+              <img
+                width="24px"
+                height="24px"
+                src={checkbox ? icon_checkbox_checked : icon_checkbox_unchecked}
+              />
+            </Checkbox.Root>
+            <label
+              className="mx-200 cursor-pointer text-body-sm text-grey-900"
+              htmlFor="c1"
+            >
+              I consent to being contacted by the team{" "}
+              <span className="text-green-600">*</span>
+            </label>
+          </div>
+
+          <button className="w-full rounded-lg bg-green-600 py-200 text-center text-body-md font-bold text-white hover:bg-grey-900">
+            Submit
+          </button>
         </form>
       </div>
     </div>