diff --git a/tools/ui-components/src/form-control/types.ts b/tools/ui-components/src/form-control/types.ts
index d26f2c1b1d6..41c77d5d169 100644
--- a/tools/ui-components/src/form-control/types.ts
+++ b/tools/ui-components/src/form-control/types.ts
@@ -2,20 +2,34 @@ import React from 'react';
 
 export type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
 
-export interface FormControlProps
-  extends React.HTMLAttributes<FormControlElement> {
+type ChangibleValues =
+  | {
+      value?: never;
+      onChange?: never;
+      readonly?: never;
+    }
+  | {
+      value: string;
+      onChange?: never;
+      readonly: boolean;
+    }
+  | {
+      value: string;
+      onChange: (event: React.ChangeEvent<FormControlElement>) => void;
+      readonly?: never;
+    };
+
+export type FormControlProps = React.HTMLAttributes<FormControlElement> & {
   className?: string;
   id?: string;
   testId?: string;
-  onChange?: React.ChangeEventHandler<FormControlElement>;
-  value?: string;
   componentClass?: typeof React.Component;
   placeholder?: string;
   name?: string;
   required?: boolean;
   rows?: number;
   type?: 'text' | 'email' | 'url';
-}
+} & ChangibleValues;
 
 export interface FormControlVariationProps {
   className?: string;