form 6

src/App.css

@@ -11,7 +11,7 @@
 }
 
 .collapsable-form-style-multiline .MuiInputBase-root {
-    width: 300px !important;
+    width: 400px !important;
     margin: 5%;
     min-height: 100px
 }

src/Components/PatientForm/SyestemReviewSection6.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup } from "@mui/material";
+import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
 import React from "react";
 
 interface FormValues {
@@ -18,6 +18,7 @@ interface FormValues {
     nerves: string;
     blood: string;
     prostate: string;
+    explanation:string;
   }
 
 export default function SystemReviewSection6(){
@@ -38,6 +39,7 @@ export default function SystemReviewSection6(){
         nerves: '',
         blood: '',
         prostate: '',
+        explanation:'',
       });
     return(
         <>
@@ -334,6 +336,21 @@ export default function SystemReviewSection6(){
                     </RadioGroup>
               </FormControl>
           </Grid>
+          <Grid item xs={6} className='collapsable-form-style-multiline'>
+          <FormLabel>Please explain your check marks:</FormLabel>
+                <TextField 
+                multiline
+                variant="outlined"
+                label="" 
+                name='explanation'
+                onChange={(event:any) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    explanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
             
         </Grid>
         </>