diff --git a/tools/ui-components/src/form-control/form-control.tsx b/tools/ui-components/src/form-control/form-control.tsx
index e9b87006af6..f3f95597564 100644
--- a/tools/ui-components/src/form-control/form-control.tsx
+++ b/tools/ui-components/src/form-control/form-control.tsx
@@ -1,12 +1,18 @@
 import React, { useContext } from 'react';
 import { FormContext } from '../form-group/form-group';
 
-import { FormControlFeedback as Feedback } from './form-control-feedback';
-import { FormControlStatic as Static } from './form-control-static';
+import { FormControlFeedback } from './form-control-feedback';
+import { FormControlStatic } from './form-control-static';
 import { FormControlProps } from './types';
 
 // Uses controlId from <FormGroup> if not explicitly specified.
 // type Only relevant if componentClass is 'input'.
+let variantClass: string;
+const defaultClasses =
+  'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
+  'bg-background-primary bg-none rounded-none border-1 border-solid ' +
+  'border-background-quaternary shadow-none ' +
+  'transition ease-in-out duration-150 focus:border-foreground-tertiary';
 
 const FormControl = ({
   id,
@@ -23,13 +29,7 @@ const FormControl = ({
 }: FormControlProps): JSX.Element => {
   const { controlId } = useContext(FormContext);
 
-  const defaultClasses =
-    'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
-    'bg-background-primary bg-none rounded-none border-1 border-solid ' +
-    'border-background-quaternary shadow-none ' +
-    'transition ease-in-out duration-150 focus:border-foreground-tertiary';
   const Component = componentClass || 'input';
-  let variantClass;
   if (Component !== 'textarea') variantClass = ' h-8';
 
   //row and componentClass
@@ -51,6 +51,7 @@ const FormControl = ({
   );
 };
 
-const MainFormControl = Object.assign(FormControl, { Feedback, Static });
+FormControl.Feedback = FormControlFeedback;
+FormControl.Static = FormControlStatic;
 
-export { MainFormControl as FormControl };
+export { FormControl };
diff --git a/tools/ui-components/src/form-control/types.ts b/tools/ui-components/src/form-control/types.ts
index 78f2c8d65ae..61930502714 100644
--- a/tools/ui-components/src/form-control/types.ts
+++ b/tools/ui-components/src/form-control/types.ts
@@ -9,31 +9,26 @@ type ChangibleValues =
       readonly?: never;
     }
   | {
-      value: string;
+      value?: string;
       onChange?: never;
       readonly: boolean;
     }
   | {
-      value: string;
+      value?: string;
       onChange: (event: React.ChangeEvent<FormControlElement>) => void;
       readonly?: never;
     };
 
 export type FormControlProps = React.HTMLAttributes<FormControlElement> & {
-  id?: string;
-  className?: string;
   testId?: string;
   componentClass?: 'textarea' | 'input';
-  placeholder?: string;
   name?: string;
   required?: boolean;
   rows?: number;
   type?: 'text' | 'email' | 'url';
 } & ChangibleValues;
 
-export interface FormControlVariationProps {
-  className?: string;
-  children?: React.ReactNode;
-  id?: string;
-  testId?: string;
-}
+export type FormControlVariationProps = Pick<
+  FormControlProps,
+  'className' | 'children' | 'id' | 'testId'
+>;