diff --git a/cypress/locators/switch/locators.js b/cypress/locators/switch/locators.js
index 423fdf2182..69296fddde 100644
--- a/cypress/locators/switch/locators.js
+++ b/cypress/locators/switch/locators.js
@@ -1,4 +1,4 @@
 // component preview locators
-const SWITCH_DATA_COMPONENT = '[data-component="Switch"]';
+const SWITCH_DATA_COMPONENT = '[data-component="switch"]';
 
 export default SWITCH_DATA_COMPONENT;
diff --git a/src/__internal__/checkable-input/checkable-input.component.js b/src/__internal__/checkable-input/checkable-input.component.js
index acf8929493..9f34293866 100644
--- a/src/__internal__/checkable-input/checkable-input.component.js
+++ b/src/__internal__/checkable-input/checkable-input.component.js
@@ -11,6 +11,7 @@ import HiddenCheckableInput from "./hidden-checkable-input.component";
 import guid from "../../utils/helpers/guid";
 
 const CheckableInput = ({
+  autoFocus,
   checked,
   children,
   disabled,
@@ -18,10 +19,10 @@ const CheckableInput = ({
   fieldHelp,
   fieldHelpInline,
   info,
-  inputId,
+  id: inputId,
   inputRef,
-  inputType,
-  inputValue,
+  type,
+  value,
   inputWidth,
   label,
   labelAlign,
@@ -35,14 +36,13 @@ const CheckableInput = ({
   onFocus,
   required,
   reverse,
-  tabindex,
   validationOnLabel,
   warning,
+  ...props
 }) => {
   const { current: id } = useRef(inputId || guid());
-  const labelId = `${id} label`;
   const helpId = `${id} help`;
-  const isRadio = inputType === "radio";
+  const isRadio = type === "radio";
 
   const formFieldProps = {
     disabled,
@@ -56,7 +56,6 @@ const CheckableInput = ({
     labelAlign,
     labelHelp,
     labelHelpIcon: "info",
-    labelId,
     labelInline,
     labelSpacing,
     name: id,
@@ -69,20 +68,20 @@ const CheckableInput = ({
   };
 
   const inputProps = {
+    autoFocus,
     checked,
     disabled,
     helpId,
     id,
     inputRef,
-    inputType,
-    inputValue,
-    labelId,
+    type,
+    value,
     name,
     onBlur,
     onChange,
     onFocus,
     required,
-    tabindex,
+    ...props,
   };
 
   return (
@@ -107,6 +106,8 @@ const CheckableInput = ({
 };
 
 CheckableInput.propTypes = {
+  /** If true the Component will be focused when page load */
+  autoFocus: PropTypes.bool,
   /** Set the value of the CheckableInput */
   checked: PropTypes.bool,
   /** Used to set the visible aspect of the input (i.e. the checkbox sprite, input slider etc) */
@@ -130,11 +131,11 @@ CheckableInput.propTypes = {
   /** Displays fieldHelp inline with the CheckableInput */
   fieldHelpInline: PropTypes.bool,
   /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
-  inputId: PropTypes.string,
+  id: PropTypes.string,
   /** Specifies input type, 'checkbox' or 'radio' */
-  inputType: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   /** Value passed to the input */
-  inputValue: PropTypes.string,
+  value: PropTypes.string,
   /** Sets percentage-based input width */
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** The content for the Label to apply to the input */
@@ -161,8 +162,6 @@ CheckableInput.propTypes = {
   reverse: PropTypes.bool,
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
-  /** Input tabindex */
-  tabindex: PropTypes.string,
   /** A callback to retrieve the input reference */
   inputRef: PropTypes.oneOfType([
     PropTypes.func,
diff --git a/src/__internal__/checkable-input/checkable-input.d.ts b/src/__internal__/checkable-input/checkable-input.d.ts
index e4a02b1142..12b290e2a7 100644
--- a/src/__internal__/checkable-input/checkable-input.d.ts
+++ b/src/__internal__/checkable-input/checkable-input.d.ts
@@ -1,9 +1,11 @@
 import * as React from "react";
+
 import { ValidationPropTypes } from "../validations";
+import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input";
 
-export interface CommonCheckableInputProps extends ValidationPropTypes {
-  /** Set the value of the CheckableInput */
-  checked?: boolean;
+export interface CommonCheckableInputProps
+  extends ValidationPropTypes,
+    CommonHiddenCheckableInputProps {
   /** If true, the component will be disabled */
   disabled?: boolean;
   /** Help content to be displayed under an input */
@@ -13,47 +15,39 @@ export interface CommonCheckableInputProps extends ValidationPropTypes {
    * To be used with labelInline prop set to true
    */
   fieldHelpInline?: boolean;
+  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
+  id?: string;
   /** Sets percentage-based input width */
   inputWidth?: number | string;
   /** Label content */
   label?: React.ReactNode;
+  /** The content for the help tooltip, to appear next to the Label */
+  labelHelp?: string | React.ReactNode;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
   /** Label width */
   labelWidth?: number;
-  /** The name of the the input */
-  name?: string;
-  /** Specify a callback triggered on blur */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specify a callback triggered on focus */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specify a callback triggered on change */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** Flag to configure component as mandatory */
   required?: boolean;
   /** If true the label switches position with the input */
   reverse?: boolean;
+  /** Size of the component */
+  size?: "small" | "large";
 }
 
 export interface CheckableInputProps extends CommonCheckableInputProps {
   /** Used to set the visible aspect of the input (i.e. the checkbox sprite, input slider etc) */
   children?: React.ReactNode;
-  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
-  inputId?: string;
   /** HTML type attribute of the input */
-  inputType?: string;
+  type: string;
   /** Value passed to the input */
-  inputValue?: string;
+  value?: string;
   /** Text alignment of the label */
   labelAlign?: "left" | "right";
-  /** A message that the Help component will display */
-  labelHelp?: React.ReactNode;
   /** When true label is inline */
   labelInline?: boolean;
 }
 
-declare class CheckableInput extends React.Component<
-  CheckableInputProps & React.HTMLProps<HTMLInputElement>
-> {}
+declare function CheckableInput(props: CheckableInputProps): JSX.Element;
 
 export default CheckableInput;
diff --git a/src/__internal__/checkable-input/checkable-input.spec.js b/src/__internal__/checkable-input/checkable-input.spec.js
index c8eb742725..fd7947ef63 100644
--- a/src/__internal__/checkable-input/checkable-input.spec.js
+++ b/src/__internal__/checkable-input/checkable-input.spec.js
@@ -2,11 +2,11 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 import { mount } from "enzyme";
 import { css } from "styled-components";
+
 import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 import CheckableInput from ".";
 import FieldHelpStyle from "../field-help/field-help.style";
 import { FieldLineStyle } from "../form-field/form-field.style";
-import Label from "../label";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
 import {
@@ -23,27 +23,20 @@ function render(props) {
 describe("CheckableInput", () => {
   function mountInput(props) {
     return mount(
-      <CheckableInput
-        inputType="text"
-        inputValue=""
-        onChange={() => null}
-        {...props}
-      />
+      <CheckableInput type="text" value="" onChange={() => null} {...props} />
     );
   }
 
   describe("helpId", () => {
     describe("when label and labelHelp props are present", () => {
-      it("returns an appropriate helpId property", () => {
+      it("passes an appropriate helpId property to Help component", () => {
         const labelWrapper = mountInput({
-          inputId: "foo",
+          id: "foo",
           label: "bar",
           labelHelp: "baz",
-        })
-          .find(Label)
-          .find("label");
+        }).find(StyledHelp);
 
-        expect(labelWrapper.prop("id")).toBe("foo label");
+        expect(labelWrapper.prop("id")).toBe("foo help");
       });
     });
   });
diff --git a/src/__internal__/checkable-input/hidden-checkable-input.component.js b/src/__internal__/checkable-input/hidden-checkable-input.component.js
index f01160ae89..67cc99da98 100644
--- a/src/__internal__/checkable-input/hidden-checkable-input.component.js
+++ b/src/__internal__/checkable-input/hidden-checkable-input.component.js
@@ -5,12 +5,13 @@ import { InputContext, InputGroupContext } from "../input-behaviour";
 
 const HiddenCheckableInput = ({
   helpId,
-  labelId,
   name,
-  inputType,
-  inputValue,
-  tabindex,
+  checked,
+  type,
+  value,
   inputRef,
+  onChange,
+  autoFocus,
   ...props
 }) => {
   const { onBlur, onFocus, onMouseEnter, onMouseLeave } = useContext(
@@ -36,45 +37,61 @@ const HiddenCheckableInput = ({
   };
 
   const handleMouseEnter = (ev) => {
+    if (props.onMouseEnter) props.onMouseEnter(ev);
     if (onMouseEnter) onMouseEnter(ev);
     if (onMouseEnterGroup) onMouseEnterGroup(ev);
   };
 
   const handleMouseLeave = (ev) => {
+    if (props.onMouseLeave) props.onMouseLeave(ev);
     if (onMouseLeave) onMouseLeave(ev);
     if (onMouseLeaveGroup) onMouseLeaveGroup(ev);
   };
 
   return (
     <HiddenCheckableInputStyle
-      aria-checked={props.checked}
-      aria-labelledby={labelId}
+      autoFocus={autoFocus}
+      aria-checked={checked}
+      checked={checked}
       aria-describedby={helpId}
       name={name}
-      role={inputType}
-      tabIndex={tabindex}
-      type={inputType}
-      value={inputValue}
+      role={type}
+      type={type}
+      value={value}
       {...props}
       onFocus={handleFocus}
       onBlur={handleBlur}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onChange={onChange}
       ref={inputRef}
     />
   );
 };
 
 HiddenCheckableInput.propTypes = {
+  /** Allows component to be focused on page load */
+  autoFocus: PropTypes.bool,
+  /** Checked state of the input */
   checked: PropTypes.bool,
-  labelId: PropTypes.string,
+  /** Element id for aria-describedby */
   helpId: PropTypes.string,
+  /** Input name */
   name: PropTypes.string,
-  onBlur: PropTypes.func,
+  /** OnChange event handler */
+  onChange: PropTypes.func,
+  /** OnFocus event handler */
   onFocus: PropTypes.func,
-  inputType: PropTypes.string.isRequired,
-  inputValue: PropTypes.string,
-  tabindex: PropTypes.number,
+  /** Blur event handler */
+  onBlur: PropTypes.func,
+  /** OnMouseLeave event handler */
+  onMouseLeave: PropTypes.func,
+  /** OnMouseEnter event handler */
+  onMouseEnter: PropTypes.func,
+  /** HTML type attribute of the input */
+  type: PropTypes.string.isRequired,
+  /** Value of the input */
+  value: PropTypes.string,
   /** A callback to retrieve the input reference */
   inputRef: PropTypes.oneOfType([
     PropTypes.func,
diff --git a/src/__internal__/checkable-input/hidden-checkable-input.d.ts b/src/__internal__/checkable-input/hidden-checkable-input.d.ts
new file mode 100644
index 0000000000..24abc93863
--- /dev/null
+++ b/src/__internal__/checkable-input/hidden-checkable-input.d.ts
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+export interface CommonHiddenCheckableInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "size" | "type"
+  > {
+  /** If true the Component will be focused when page load */
+  autoFocus?: boolean;
+  /** Checked state of the input */
+  checked?: boolean;
+  /** Input name */
+  name?: string;
+  /** OnChange event handler */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** OnFocus event handler */
+  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Blur event handler */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** OnMouseLeave event handler */
+  onMouseLeave?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+  /** OnMouseEnter event handler */
+  onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+  /** Value of the input */
+  value?: string;
+  /** A callback to retrieve the input reference */
+  inputRef: React.Ref<HTMLInputElement>;
+}
+
+export interface HiddenCheckableInputProps
+  extends CommonHiddenCheckableInputProps {
+  /** HTML type attribute of the input */
+  type: string;
+  /** Element id for aria-describedby */
+  helpId?: string;
+}
+
+declare function HiddenCheckableInput(
+  props: HiddenCheckableInputProps
+): JSX.Element;
+
+export default HiddenCheckableInput;
diff --git a/src/__internal__/checkable-input/hidden-checkable-input.spec.js b/src/__internal__/checkable-input/hidden-checkable-input.spec.js
index 5eafd453b9..1d3375ddc5 100644
--- a/src/__internal__/checkable-input/hidden-checkable-input.spec.js
+++ b/src/__internal__/checkable-input/hidden-checkable-input.spec.js
@@ -13,7 +13,7 @@ const render = (
   return mount(
     <InputGroupContext.Provider value={inputGroupContextValue}>
       <InputContext.Provider value={inputContextValue}>
-        <HiddenCheckableInput inputType="test" {...props} />
+        <HiddenCheckableInput type="test" {...props} />
       </InputContext.Provider>
     </InputGroupContext.Provider>
   );
@@ -28,9 +28,11 @@ describe("HiddenCheckableInput", () => {
   let contextOnFocus;
   let groupContextOnFocus;
 
+  let propOnMouseEnter;
   let contextOnMouseEnter;
   let groupContextOnMouseEnter;
 
+  let propOnMouseLeave;
   let contextOnMouseLeave;
   let groupContextOnMouseLeave;
 
@@ -45,9 +47,11 @@ describe("HiddenCheckableInput", () => {
     contextOnFocus = jest.fn();
     groupContextOnFocus = jest.fn();
 
+    propOnMouseEnter = jest.fn();
     contextOnMouseEnter = jest.fn();
     groupContextOnMouseEnter = jest.fn();
 
+    propOnMouseLeave = jest.fn();
     contextOnMouseLeave = jest.fn();
     groupContextOnMouseLeave = jest.fn();
 
@@ -55,6 +59,8 @@ describe("HiddenCheckableInput", () => {
       {
         onBlur: propOnBlur,
         onFocus: propOnFocus,
+        onMouseEnter: propOnMouseEnter,
+        onMouseLeave: propOnMouseLeave,
       },
       {
         onBlur: groupContextOnBlur,
@@ -76,9 +82,9 @@ describe("HiddenCheckableInput", () => {
       checked: true,
       helpId: "test-help",
       name: "test-name",
-      inputType: "test-type",
-      inputValue: "test-value",
-      tabindex: 0,
+      type: "test-type",
+      value: "test-value",
+      tabIndex: 0,
     };
 
     const shallowWrapper = shallow(<HiddenCheckableInput {...props} />);
@@ -101,12 +107,14 @@ describe("HiddenCheckableInput", () => {
 
   it("triggers onMouseEnter callbacks passed from context", () => {
     wrapper.find(HiddenCheckableInputStyle).props().onMouseEnter();
+    expect(propOnMouseEnter).toHaveBeenCalled();
     expect(contextOnMouseEnter).toHaveBeenCalled();
     expect(groupContextOnMouseEnter).toHaveBeenCalled();
   });
 
   it("triggers onMouseLeave callbacks passed from context", () => {
     wrapper.find(HiddenCheckableInputStyle).props().onMouseLeave();
+    expect(propOnMouseLeave).toHaveBeenCalled();
     expect(contextOnMouseLeave).toHaveBeenCalled();
     expect(groupContextOnMouseLeave).toHaveBeenCalled();
   });
diff --git a/src/__internal__/form-field/form-field.component.js b/src/__internal__/form-field/form-field.component.js
index 39766d4146..d35bd843e5 100644
--- a/src/__internal__/form-field/form-field.component.js
+++ b/src/__internal__/form-field/form-field.component.js
@@ -1,6 +1,8 @@
 import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
+import { filterStyledSystemMarginProps } from "../../style/utils";
 import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
 import Label from "../label";
 import FieldHelp from "../field-help";
@@ -8,6 +10,10 @@ import tagComponent from "../../utils/helpers/tags";
 import { TabContext } from "../../components/tabs/tab";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
+
 const FormField = ({
   children,
   disabled,
@@ -17,7 +23,6 @@ const FormField = ({
   warning,
   info,
   helpId,
-  helpTag,
   helpTabIndex,
   label,
   labelId,
@@ -27,12 +32,9 @@ const FormField = ({
   labelInline,
   labelSpacing = 2,
   labelWidth,
-  name,
   id,
   reverse,
-  childOfForm,
   isOptional,
-  readOnly,
   useValidationIcon,
   adaptiveLabelBreakpoint,
   isRequired,
@@ -53,61 +55,12 @@ const FormField = ({
     }
   }, [id, context, error, warning, info]);
 
-  // Conditionally add the spacing props, we can't spread ...rest because some of the parent components
-  // incorrectly pass props that are consumed in other components.
-  //
-  // The styled-system/space props need to be conditional, a undefined value is still considered a value and affects the
-  // the behaviour
-  //
-  // FIXME FE-3370
-  const spacingProps = [
-    "m",
-    "margin",
-    "ml",
-    "marginLeft",
-    "mr",
-    "marginRight",
-    "mt",
-    "marginTop",
-    "mb",
-    "marginBottom",
-    "mx",
-    "marginLeft",
-    "mx",
-    "marginRight",
-    "my",
-    "marginTop",
-    "my",
-    "marginBottom",
-    "p",
-    "padding",
-    "pl",
-    "paddingLeft",
-    "pr",
-    "paddingRight",
-    "pt",
-    "paddingTop",
-    "pb",
-    "paddingBottom",
-    "px",
-    "paddingLeft",
-    "px",
-    "paddingRight",
-    "py",
-    "paddingTop",
-    "py",
-    "paddingBottom",
-  ].reduce((prev, curr) => {
-    if (Object.prototype.hasOwnProperty.call(rest, curr)) {
-      prev[curr] = rest[curr];
-    }
-    return prev;
-  }, {});
+  const marginProps = filterStyledSystemMarginProps(rest);
 
   return (
     <FormFieldStyle
       {...tagComponent(rest["data-component"], rest)}
-      {...spacingProps}
+      {...marginProps}
     >
       <FieldLineStyle inline={inlineLabel}>
         {reverse && children}
@@ -117,19 +70,16 @@ const FormField = ({
             labelId={labelId}
             align={labelAlign}
             disabled={disabled}
-            readOnly={readOnly}
             error={error}
             warning={warning}
             info={info}
             help={labelHelp}
             helpId={helpId}
-            helpTag={helpTag}
             helpTabIndex={helpTabIndex}
             htmlFor={id}
             helpIcon={labelHelpIcon}
             inline={inlineLabel}
             width={labelWidth}
-            childOfForm={childOfForm}
             optional={isOptional}
             useValidationIcon={useValidationIcon}
             pr={!reverse ? labelSpacing : undefined}
@@ -175,22 +125,21 @@ const errorPropType = (props, propName, componentName, ...rest) => {
 };
 
 FormField.propTypes = {
-  /** Styled system spacing props */
-  ...propTypes.space,
+  /** Styled system margin props */
+  ...marginPropTypes,
   children: PropTypes.node,
-  childOfForm: PropTypes.bool,
   disabled: PropTypes.bool,
   "data-component": PropTypes.string,
+  "data-role": PropTypes.string,
+  "data-element": PropTypes.string,
   fieldHelp: PropTypes.node,
   fieldHelpInline: PropTypes.bool,
   error: errorPropType,
   warning: errorPropType,
   info: errorPropType,
   helpId: PropTypes.string,
-  helpTag: PropTypes.string,
   helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   id: PropTypes.string.isRequired,
-  name: PropTypes.string,
   isOptional: PropTypes.bool,
   label: PropTypes.node,
   labelId: PropTypes.string,
@@ -201,7 +150,6 @@ FormField.propTypes = {
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
   labelWidth: PropTypes.number,
-  readOnly: PropTypes.bool,
   reverse: PropTypes.bool,
   useValidationIcon: PropTypes.bool,
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
diff --git a/src/__internal__/form-field/form-field.d.ts b/src/__internal__/form-field/form-field.d.ts
index e2585f3a9d..e71ef50796 100644
--- a/src/__internal__/form-field/form-field.d.ts
+++ b/src/__internal__/form-field/form-field.d.ts
@@ -1,20 +1,16 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { MarginProps } from "styled-system";
 import { ValidationPropTypes } from "../validations";
 
 export interface CommonFormFieldPropTypes
-  extends SpaceProps,
+  extends MarginProps,
     ValidationPropTypes {
-  /** Flag to indicate that component is used in a Form */
-  childOfForm?: boolean;
   /** If true, the component will be disabled */
   disabled?: boolean;
   /** Help content to be displayed under an input */
   fieldHelp?: React.ReactNode;
   /** The unique id of the Help component */
   helpId?: string;
-  /** Overrides the default 'as' attribute of the Help component */
-  helpTag?: string;
   /** Overrides the default tabindex of the Help component */
   helpTabIndex?: number | string;
   /** Label content */
@@ -53,11 +49,14 @@ export interface FormFieldPropTypes extends CommonFormFieldPropTypes {
   isOptional?: boolean;
   /** Flag to configure component as mandatory */
   isRequired?: boolean;
-  /** If true, the component will be read-only */
-  readOnly?: boolean;
   /** Whether to show the validation icon */
   useValidationIcon?: boolean;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
 }
 
 declare function FormField(props: FormFieldPropTypes): JSX.Element;
diff --git a/src/__internal__/input/input-presentation.component.js b/src/__internal__/input/input-presentation.component.js
index 58dfca7e86..1e87f87310 100644
--- a/src/__internal__/input/input-presentation.component.js
+++ b/src/__internal__/input/input-presentation.component.js
@@ -4,14 +4,19 @@ import PropTypes from "prop-types";
 import InputPresentationStyle, {
   StyledInputPresentationContainer,
 } from "./input-presentation.style";
-import extractProps from "../../utils/helpers/extract-props";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 
 const InputPresentation = ({
   children,
   positionedChildren,
   inputWidth,
-  ...rest
+  align,
+  disabled,
+  readOnly,
+  size,
+  error,
+  warning,
+  info,
 }) => {
   const { hasFocus, onMouseDown, onMouseEnter, onMouseLeave } = useContext(
     InputContext
@@ -22,8 +27,6 @@ const InputPresentation = ({
     onMouseLeave: onGroupMouseLeave,
   } = useContext(InputGroupContext);
 
-  const styleProps = extractProps(rest, InputPresentationStyle);
-
   const handleMouseEnter = (e) => {
     if (onMouseEnter) onMouseEnter(e);
     if (onGroupMouseEnter) onGroupMouseEnter(e);
@@ -43,7 +46,13 @@ const InputPresentation = ({
         onMouseDown={onMouseDown}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        {...styleProps}
+        align={align}
+        disabled={disabled}
+        readOnly={readOnly}
+        size={size}
+        warning={warning}
+        error={error}
+        info={info}
       >
         {children}
       </InputPresentationStyle>
@@ -55,7 +64,6 @@ InputPresentation.propTypes = {
   children: PropTypes.node,
   align: PropTypes.string,
   disabled: PropTypes.bool,
-  hasFocus: PropTypes.bool,
   inputWidth: PropTypes.number,
   readOnly: PropTypes.bool,
   positionedChildren: PropTypes.node,
diff --git a/src/__internal__/input/input-presentation.d.ts b/src/__internal__/input/input-presentation.d.ts
index fed1fc6750..4f93772364 100644
--- a/src/__internal__/input/input-presentation.d.ts
+++ b/src/__internal__/input/input-presentation.d.ts
@@ -15,8 +15,6 @@ export interface CommonInputPresentationProps extends ValidationPropTypes {
 }
 
 export interface InputPresentationProps extends CommonInputPresentationProps {
-  /** If true the outline is rendered around the input */
-  hasFocus?: boolean;
   /** Content to be rendered before the input */
   positionedChildren?: React.ReactNode;
 }
diff --git a/src/__internal__/input/input-presentation.style.js b/src/__internal__/input/input-presentation.style.js
index 6ef3ff423c..70f54cf355 100644
--- a/src/__internal__/input/input-presentation.style.js
+++ b/src/__internal__/input/input-presentation.style.js
@@ -84,20 +84,7 @@ function stylingForValidations({ theme, error, warning, info, disabled }) {
   `;
 }
 
-InputPresentationStyle.safeProps = [
-  "align",
-  "disabled",
-  "hasFocus",
-  "inputWidth",
-  "readOnly",
-  "size",
-  "error",
-  "warning",
-  "info",
-];
-
 InputPresentationStyle.defaultProps = {
-  inputWidth: 100,
   size: "medium",
   theme: baseTheme,
 };
@@ -106,7 +93,6 @@ InputPresentationStyle.propTypes = {
   align: PropTypes.string,
   disabled: PropTypes.bool,
   hasFocus: PropTypes.bool,
-  inputWidth: PropTypes.number,
   readOnly: PropTypes.bool,
   size: PropTypes.oneOf(["small", "medium", "large"]),
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
diff --git a/src/__internal__/input/input.component.js b/src/__internal__/input/input.component.js
index a4875eab66..63a4fd7dfc 100644
--- a/src/__internal__/input/input.component.js
+++ b/src/__internal__/input/input.component.js
@@ -6,6 +6,10 @@ import { InputContext, InputGroupContext } from "../input-behaviour";
 const Input = React.forwardRef(
   (
     {
+      align,
+      placeholder,
+      disabled,
+      readOnly,
       autoFocus,
       inputRef,
       onClick,
@@ -74,6 +78,10 @@ const Input = React.forwardRef(
     return (
       <StyledInput
         {...rest}
+        align={align}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
         name={name}
         type={type}
         id={id || name}
@@ -89,6 +97,10 @@ const Input = React.forwardRef(
 );
 
 Input.propTypes = {
+  align: PropTypes.oneOf(["right", "left"]),
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
   className: PropTypes.string,
   id: PropTypes.string,
   /** A callback to retrieve the input reference */
diff --git a/src/__internal__/input/input.d.ts b/src/__internal__/input/input.d.ts
index 37f4fc834f..402ff21e5b 100644
--- a/src/__internal__/input/input.d.ts
+++ b/src/__internal__/input/input.d.ts
@@ -1,6 +1,9 @@
 import * as React from "react";
 
-export interface CommonInputProps {
+export interface CommonInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> {
+  /* The default value alignment on the input */
+  align?: "right" | "left";
   /** If true the Component will be focused when rendered */
   autoFocus?: boolean;
   /** If true, the component will be disabled */
@@ -8,7 +11,7 @@ export interface CommonInputProps {
   /** HTML id attribute of the input */
   id?: string;
   /** A callback to retrieve the input reference */
-  inputRef?: () => void;
+  inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
   /** Name of the input */
   name?: string;
   /** Specify a callback triggered on blur */
@@ -19,7 +22,7 @@ export interface CommonInputProps {
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
   /** Specify a callback triggered on focus */
   onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** pecify a callback triggered on keuyDown */
+  /** Specify a callback triggered on keyDown */
   onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Placeholder string to be displayed in input */
   placeholder?: string;
@@ -41,9 +44,7 @@ export interface InputProps extends CommonInputProps {
 }
 
 declare function Input(
-  props: InputProps &
-    React.RefAttributes<HTMLInputElement> &
-    React.HTMLProps<HTMLInputElement>
+  props: InputProps & React.RefAttributes<HTMLInputElement>
 ): JSX.Element;
 
 export default Input;
diff --git a/src/__internal__/label/label.component.js b/src/__internal__/label/label.component.js
index 08acbac90d..cf2ceb30ef 100644
--- a/src/__internal__/label/label.component.js
+++ b/src/__internal__/label/label.component.js
@@ -20,7 +20,6 @@ const Label = ({
   inline,
   align = "right",
   width,
-  childOfForm,
   optional,
   labelId,
   helpId,
@@ -30,7 +29,6 @@ const Label = ({
   info,
   help,
   helpIcon,
-  helpTag,
   helpTabIndex,
   useValidationIcon = true,
   htmlFor,
@@ -95,7 +93,6 @@ const Label = ({
         <IconWrapperStyle {...wrapperProps}>
           <Help
             helpId={helpId}
-            as={helpTag}
             tabIndex={helpTabIndex}
             type={helpIcon}
             isFocused={isFocused}
@@ -113,7 +110,6 @@ const Label = ({
       inline={inline}
       width={width}
       optional={optional}
-      childOfForm={childOfForm}
       pr={pr}
       pl={pl}
     >
@@ -138,8 +134,6 @@ Label.propTypes = {
   width: PropTypes.number,
   /** Label alignment */
   align: PropTypes.oneOf(["left", "right"]),
-  /** Flag to indicate that component is used in a Form */
-  childOfForm: PropTypes.bool,
   /** When true, label is placed in line an input */
   inline: PropTypes.bool,
   /** If true, the component will be disabled */
@@ -162,8 +156,6 @@ Label.propTypes = {
   help: PropTypes.node,
   /** Icon type */
   helpIcon: PropTypes.string,
-  /** Overrides the default 'as' attribute of the Help component */
-  helpTag: PropTypes.string,
   /** Overrides the default tabindex of the Help component */
   helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Whether to show the validation icon */
diff --git a/src/__internal__/label/label.d.ts b/src/__internal__/label/label.d.ts
index f8a9952a4b..29fd4c0880 100644
--- a/src/__internal__/label/label.d.ts
+++ b/src/__internal__/label/label.d.ts
@@ -1,14 +1,11 @@
 import * as React from "react";
+import { ValidationPropTypes } from "../validations";
 
-export interface LabelPropTypes {
+export interface LabelPropTypes extends ValidationPropTypes {
   /** Label width */
   width?: number;
   /** Label alignment */
   align?: "left" | "right";
-  /** Size of an input Label is used in */
-  inputSize: "small" | "medium" | "large";
-  /** Flag to indicate that component is used in a Form */
-  childOfForm: boolean;
   /** When true, label is placed in line an input */
   inline?: boolean;
   /** Flag to configure component as mandatory */
@@ -23,18 +20,10 @@ export interface LabelPropTypes {
   helpId?: string;
   /** Children elements */
   children?: React.ReactNode;
-  /** Status of error validations */
-  error?: string | boolean;
-  /** Status of warnings */
-  warning?: string | boolean;
-  /** Status of info */
-  info?: string | boolean;
   /** A message that the Help component will display */
   help?: React.ReactNode;
   /** Icon type */
   helpIcon?: string;
-  /** Overrides the default 'as' attribute of the Help component */
-  helpTag?: string;
   /** Overrides the default tabindex of the Help component */
   helpTabIndex?: string;
   /** Whether to show the validation icon */
@@ -45,10 +34,8 @@ export interface LabelPropTypes {
   pr?: 1 | 2;
   /** Padding left, integer multiplied by base spacing constant (8) */
   pl?: 1 | 2;
-  /** Allows to override existing component styles */
-  styleOverride?: () => object | object;
 }
 
-declare const Label: React.FunctionComponent<LabelPropTypes>;
+declare function Label(props: LabelPropTypes): JSX.Element;
 
 export default Label;
diff --git a/src/__internal__/label/label.spec.js b/src/__internal__/label/label.spec.js
index f230525354..c6fba071c1 100644
--- a/src/__internal__/label/label.spec.js
+++ b/src/__internal__/label/label.spec.js
@@ -106,7 +106,6 @@ describe("Label", () => {
     it('applies styling for an inline "optional" label', () => {
       const wrapper = render({
         inline: true,
-        childOfForm: true,
         optional: true,
         theme: mintTheme,
       });
@@ -134,7 +133,6 @@ describe("Label", () => {
     it('applies styling for an inline "isRequired" label', () => {
       const wrapper = render({
         inline: true,
-        childOfForm: false,
         isRequired: true,
         theme: mintTheme,
       });
diff --git a/src/__internal__/label/label.style.js b/src/__internal__/label/label.style.js
index 1a301d516e..ba82786c51 100644
--- a/src/__internal__/label/label.style.js
+++ b/src/__internal__/label/label.style.js
@@ -55,17 +55,14 @@ export const StyledLabelContainer = styled.div`
       width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
     `}
 
-  ${({ childOfForm, optional }) =>
-    childOfForm &&
+  ${({ optional }) =>
+    optional &&
     css`
-      ${optional &&
-      css`
-        ::after {
-          content: "(optional)";
-          font-weight: 350;
-          margin-left: 4px;
-        }
-      `}
+      ::after {
+        content: "(optional)";
+        font-weight: 350;
+        margin-left: 4px;
+      }
     `}
 `;
 
diff --git a/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap b/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
index 2c49ab657d..48ccd4b25c 100644
--- a/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
+++ b/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
@@ -93,13 +93,13 @@ input:not(:checked):not(:disabled) ~ .c6:hover .c8 {
 
 <div
   className="c0 c1"
+  data-component="button-toggle-group"
 >
   <div
     className="c2"
   >
     <div
       className="c3"
-      data-component="button-toggle-group"
       role="group"
     >
       <div
diff --git a/src/components/button-toggle-group/button-toggle-group.component.js b/src/components/button-toggle-group/button-toggle-group.component.js
index 2d3d719676..226ef935e3 100644
--- a/src/components/button-toggle-group/button-toggle-group.component.js
+++ b/src/components/button-toggle-group/button-toggle-group.component.js
@@ -14,31 +14,55 @@ const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
 );
 
-const ButtonToggleGroup = (props) => {
-  const {
-    name,
-    inputWidth,
-    error,
-    warning,
-    info,
-    label,
-    onChange,
-    onBlur,
-    children,
-    value,
-    validationOnLabel,
-  } = props;
-
+const ButtonToggleGroup = ({
+  children,
+  name,
+  error,
+  warning,
+  info,
+  validationOnLabel,
+  label,
+  labelHelp,
+  labelSpacing,
+  inputWidth,
+  fieldHelp,
+  fieldHelpInline,
+  labelInline,
+  labelWidth,
+  labelAlign,
+  onChange,
+  onBlur,
+  value,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  ...props
+}) => {
   const validationProps = {
     error,
     warning,
     info,
   };
+
   return (
     <InputGroupBehaviour>
-      <FormField useValidationIcon={validationOnLabel} {...props}>
+      <FormField
+        useValidationIcon={validationOnLabel}
+        label={label}
+        labelHelp={labelHelp}
+        labelSpacing={labelSpacing}
+        fieldHelp={fieldHelp}
+        fieldHelpInline={fieldHelpInline}
+        labelInline={labelInline}
+        labelWidth={labelWidth}
+        labelAlign={labelAlign}
+        data-component={dataComponent}
+        data-role={dataRole}
+        data-element={dataElement}
+        {...validationProps}
+        {...filterStyledSystemMarginProps(props)}
+      >
         <ButtonToggleGroupStyle
-          data-component="button-toggle-group"
           aria-label={label}
           role="group"
           inputWidth={inputWidth}
@@ -66,6 +90,12 @@ const ButtonToggleGroup = (props) => {
 
 ButtonToggleGroup.propTypes = {
   ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** Specifies the name prop to be applied to each button in the group */
   name: PropTypes.string.isRequired,
   /** Children to be rendered (ButtonToggle). */
@@ -129,6 +159,7 @@ ButtonToggleGroup.propTypes = {
 
 ButtonToggleGroup.defaultProps = {
   validationOnLabel: false,
+  "data-component": "button-toggle-group",
 };
 
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
diff --git a/src/components/button-toggle-group/button-toggle-group.d.ts b/src/components/button-toggle-group/button-toggle-group.d.ts
index 4b8bc1578e..180111d7d6 100644
--- a/src/components/button-toggle-group/button-toggle-group.d.ts
+++ b/src/components/button-toggle-group/button-toggle-group.d.ts
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { MarginProps } from "styled-system";
 
 import { ButtonToggleProps } from "../button-toggle";
 import { ValidationPropTypes } from "../../__internal__/validations";
@@ -9,7 +10,15 @@ type ButtonToggle =
   | null
   | undefined;
 
-export interface ButtonToggleGroupProps extends ValidationPropTypes {
+export interface ButtonToggleGroupProps
+  extends ValidationPropTypes,
+    MarginProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Specifies the name prop to be applied to each button in the group */
   name: string;
   /** Children to be rendered (ButtonToggle). */
@@ -40,8 +49,6 @@ export interface ButtonToggleGroupProps extends ValidationPropTypes {
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** The value of the Button Toggle Group */
   value?: string;
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
 }
 
 declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;
diff --git a/src/components/checkbox/checkbox-group.d.ts b/src/components/checkbox/checkbox-group.d.ts
index b5fbd18c42..18e42bf128 100644
--- a/src/components/checkbox/checkbox-group.d.ts
+++ b/src/components/checkbox/checkbox-group.d.ts
@@ -17,8 +17,6 @@ interface CheckboxGroupProps extends ValidationPropTypes, MarginProps {
   children: React.ReactNode;
   /** Specifies the name prop to be applied to each button in the group */
   groupName: string;
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
   /** Flag to configure component as mandatory */
diff --git a/src/components/checkbox/checkbox.component.js b/src/components/checkbox/checkbox.component.js
index c8dab93046..92996171a5 100644
--- a/src/components/checkbox/checkbox.component.js
+++ b/src/components/checkbox/checkbox.component.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
-import tagComponent from "../../utils/helpers/tags";
+
 import CheckboxStyle from "./checkbox.style";
 import CheckableInput from "../../__internal__/checkable-input/checkable-input.component";
 import CheckboxSvg from "./checkbox-svg.component";
@@ -21,6 +21,7 @@ const Checkbox = ({
   /* FIXME: FE-4102 */
   onClick,
   onBlur,
+  onFocus,
   value,
   fieldHelp,
   autoFocus,
@@ -39,6 +40,9 @@ const Checkbox = ({
   inputWidth,
   size,
   tooltipPosition,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...props
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
@@ -50,11 +54,12 @@ const Checkbox = ({
     onClick,
     onChange,
     onBlur,
+    onFocus,
     labelInline: true,
-    inputId: id,
+    id,
     label,
-    inputValue: value,
-    inputType: "checkbox",
+    value,
+    type: "checkbox",
     name,
     reverse: !reverse,
     fieldHelp,
@@ -71,16 +76,18 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
+    ...props,
   };
 
   return (
     <TooltipProvider tooltipPosition={tooltipPosition}>
       <CheckboxStyle
-        {...tagComponent("checkbox", props)}
+        data-component={dataComponent}
+        data-role={dataRole}
+        data-element={dataElement}
         disabled={disabled}
         labelSpacing={labelSpacing}
         inputWidth={inputWidth}
-        labelWidth={labelWidth}
         adaptiveSpacingSmallScreen={adaptiveSpacingSmallScreen}
         error={error}
         warning={warning}
@@ -88,7 +95,7 @@ const Checkbox = ({
         fieldHelpInline={fieldHelpInline}
         reverse={reverse}
         size={size}
-        {...props}
+        {...filterStyledSystemMarginProps(props)}
       >
         <CheckableInput {...inputProps}>
           <CheckboxSvg />
@@ -101,7 +108,13 @@ const Checkbox = ({
 Checkbox.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
-  /** Set the value of the checkbox */
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+  /** Checked state of the input */
   checked: PropTypes.bool,
   /** Toggles disabling of input */
   disabled: PropTypes.bool,
@@ -125,6 +138,8 @@ Checkbox.propTypes = {
   onChange: PropTypes.func,
   /** Accepts a callback function which is triggered on blur event */
   onBlur: PropTypes.func,
+  /** Accepts a callback function which is triggered on focus event */
+  onFocus: PropTypes.func,
   /** Accepts a callback function which is triggered on click event */
   onClick: PropTypes.func,
   /** Reverses label and checkbox display */
@@ -148,7 +163,7 @@ Checkbox.propTypes = {
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** Allows component to be focused on page load */
+  /** If true the Component will be focused when page load */
   autoFocus: PropTypes.bool,
   /** The content for the help tooltip, to appear next to the Label */
   labelHelp: PropTypes.node,
@@ -162,6 +177,7 @@ Checkbox.propTypes = {
 
 Checkbox.defaultProps = {
   reverse: false,
+  "data-component": "checkbox",
 };
 
 export default Checkbox;
diff --git a/src/components/checkbox/checkbox.d.ts b/src/components/checkbox/checkbox.d.ts
index afeb03a5e5..183ddcf3a4 100644
--- a/src/components/checkbox/checkbox.d.ts
+++ b/src/components/checkbox/checkbox.d.ts
@@ -2,21 +2,15 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 
-export type CheckboxSize = "small" | "large";
-
 export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint?: number;
-  /** If true the Component will be focused when rendered */
-  autoFocus?: boolean;
-  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
-  id?: string;
-  /** A message that the Help component will display */
-  labelHelp?: string | React.ReactNode;
-  /** Size of the checkbox */
-  size?: CheckboxSize;
-  /** Name of the input */
-  name?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
+  adaptiveSpacingBreakpoint?: number;
   /** The value of the checkbox, passed on form submit */
   value?: string;
   /** Overrides the default tooltip position */
diff --git a/src/components/checkbox/checkbox.stories.mdx b/src/components/checkbox/checkbox.stories.mdx
index d4a4474d42..83f8213bcc 100644
--- a/src/components/checkbox/checkbox.stories.mdx
+++ b/src/components/checkbox/checkbox.stories.mdx
@@ -190,6 +190,8 @@ The spacing between the legend and the checkboxes can be changed with the `legen
 
 <StyledSystemProps of={Checkbox} noHeader margin />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ### CheckboxGroup
 
 <StyledSystemProps of={CheckboxGroup} noHeader margin />
diff --git a/src/components/checkbox/checkbox.style.js b/src/components/checkbox/checkbox.style.js
index 058628c5b2..cca613cf52 100644
--- a/src/components/checkbox/checkbox.style.js
+++ b/src/components/checkbox/checkbox.style.js
@@ -201,7 +201,6 @@ CheckboxStyle.propTypes = {
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   fieldHelpInline: PropTypes.bool,
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   size: PropTypes.string,
 };
 
diff --git a/src/components/date/date.component.js b/src/components/date/date.component.js
index 4bbdc5d06d..d4f9c16ca0 100644
--- a/src/components/date/date.component.js
+++ b/src/components/date/date.component.js
@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import styledSystemPropTypes from "@styled-system/prop-types";
 
-import { filterStyledSystemMarginProps } from "../../style/utils";
+import {
+  filterStyledSystemMarginProps,
+  filterOutStyledSystemSpacingProps,
+} from "../../style/utils";
 import Events from "../../utils/helpers/events/events";
 import DateHelper from "../../utils/helpers/date/date";
-import tagComponent from "../../utils/helpers/tags/tags";
 import DatePicker from "./date-picker.component";
 import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
@@ -21,13 +23,6 @@ const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
 );
 
-// Spacing props filtering is a temporary solution until FormField and all related components are refactored
-// FIXME FE-3370
-const filterOutSpacingProps = (obj) =>
-  Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !styledSystemPropTypes.space[key])
-  );
-
 class BaseDateInput extends React.Component {
   localeData = {
     locale: this.context.locale(),
@@ -485,6 +480,9 @@ class BaseDateInput extends React.Component {
       adaptiveLabelBreakpoint,
       disablePortal,
       tooltipPosition,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...inputProps
     } = this.props;
 
@@ -505,11 +503,13 @@ class BaseDateInput extends React.Component {
         role="presentation"
         size={inputProps.size}
         labelInline={labelInline}
-        {...tagComponent("date", this.props)}
+        data-component={dataComponent}
+        data-element={dataElement}
+        data-role={dataRole}
         {...filterStyledSystemMarginProps(this.props)}
       >
         <Textbox
-          {...filterOutSpacingProps(inputProps)}
+          {...filterOutStyledSystemSpacingProps(inputProps)}
           inputIcon="calendar"
           value={this.state.visibleValue}
           labelInline={labelInline}
@@ -590,6 +590,12 @@ BaseDateInput.contextType = LocaleContext;
 BaseDateInput.propTypes = {
   ...Textbox.propTypes,
   ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: PropTypes.bool,
   /** Automatically focus on component mount */
@@ -618,6 +624,7 @@ BaseDateInput.propTypes = {
 
 BaseDateInput.defaultProps = {
   disablePortal: false,
+  "data-component": "date",
 };
 
 export { defaultDateFormat, BaseDateInput };
diff --git a/src/components/date/date.d.ts b/src/components/date/date.d.ts
index 67f6fefb2b..9caa441ab8 100644
--- a/src/components/date/date.d.ts
+++ b/src/components/date/date.d.ts
@@ -2,6 +2,12 @@ import * as React from "react";
 import { TextboxProps } from "../textbox/textbox";
 
 export interface DateInputProps extends TextboxProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue?: boolean;
   /** Automatically focus on component mount */
diff --git a/src/components/date/date.stories.mdx b/src/components/date/date.stories.mdx
index 541d32160f..478f5fbfd5 100644
--- a/src/components/date/date.stories.mdx
+++ b/src/components/date/date.stories.mdx
@@ -331,12 +331,12 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <StyledSystemProps of={BaseDateInput} noHeader margin />
 
-### Textbox
-
-Due to the `Textbox` component being used internally by the `Date` component most of the `Textbox` props are appliable to `Date`
+Due to the `Textbox` component being used internally by the `Date` component most of the `Textbox` props are applicable to `Date`
 
 <Props of={OriginalTextbox} exclude={["prefix", "inputIcon"]} />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ## Translation keys
 
 The following keys are available to override the translations for this component by passing in a custom locale object to the
diff --git a/src/components/decimal/decimal.component.js b/src/components/decimal/decimal.component.js
index b1cb3ff7dd..19762e7679 100644
--- a/src/components/decimal/decimal.component.js
+++ b/src/components/decimal/decimal.component.js
@@ -241,7 +241,6 @@ class Decimal extends React.Component {
           onChange={this.onChange}
           onBlur={this.onBlur}
           value={this.state.visibleValue}
-          data-component="decimal"
         />
         <input
           name={name}
@@ -259,6 +258,8 @@ Decimal.contextType = LocaleContext;
 Decimal.propTypes = {
   /** Styled-system margin props */
   ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
   /**
    * The default value alignment on the input
    */
@@ -330,6 +331,7 @@ Decimal.defaultProps = {
   align: "right",
   precision: 2,
   allowEmptyValue: false,
+  "data-component": "decimal",
 };
 
 export default Decimal;
diff --git a/src/components/decimal/decimal.d.ts b/src/components/decimal/decimal.d.ts
index 1e56560c9d..e78f99c87f 100644
--- a/src/components/decimal/decimal.d.ts
+++ b/src/components/decimal/decimal.d.ts
@@ -1,8 +1,7 @@
 import * as React from "react";
-import { MarginProps } from "styled-system";
 import { CommonTextboxProps } from "../textbox";
 
-export interface DecimalProps extends CommonTextboxProps, MarginProps {
+export interface DecimalProps extends CommonTextboxProps {
   /** Text alignment of the label */
   align?: "left" | "right";
   /** Allow an empty value instead of defaulting to 0.00 */
@@ -18,7 +17,7 @@ export interface DecimalProps extends CommonTextboxProps, MarginProps {
   /** Handler for blur event */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
   /** Handler for key press event */
-  onKeyPress?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
   /** The input name */
   name?: string;
   /** The decimal precision of the value in the input */
diff --git a/src/components/decimal/decimal.stories.mdx b/src/components/decimal/decimal.stories.mdx
index 7c38595eea..4f044ca416 100644
--- a/src/components/decimal/decimal.stories.mdx
+++ b/src/components/decimal/decimal.stories.mdx
@@ -466,12 +466,12 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <StyledSystemProps of={Decimal} noHeader margin />
 
-### Textbox
-
-Due to the `Textbox` component being used internally by the `Decimal` component, most of the `Textbox` props are appliable to `Decimal`
+Due to the `Textbox` component being used internally by the `Decimal` component, most of the `Textbox` props are applicable to `Decimal`
 
 <Props of={OriginalTextbox} />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ## Translation keys
 
 The following keys are available to override the translations for this component by passing in a custom locale object to the
diff --git a/src/components/form/form.stories.mdx b/src/components/form/form.stories.mdx
index f9e0596c42..d599d68cb6 100644
--- a/src/components/form/form.stories.mdx
+++ b/src/components/form/form.stories.mdx
@@ -486,7 +486,6 @@ Please click on "Show code" below to see how to set these components up for alig
       fieldSpacing={4}
     >
       <Textbox
-        childOfForm
         key="input-one"
         label="Field 1"
         placeholder="placeholder"
@@ -498,7 +497,6 @@ Please click on "Show code" below to see how to set these components up for alig
         isOptional={false}
       />
       <Textbox
-        childOfForm
         key="input-two"
         label="Field 2"
         placeholder="placeholder"
@@ -558,7 +556,6 @@ Please click on "Show code" below to see how to set these components up for alig
         />
       </RadioButtonGroup>
       <Textarea
-        childOfForm
         key="input-three"
         label="Field 3"
         placeholder="placeholder"
@@ -584,7 +581,6 @@ Please click on "Show code" below to see how to set these components up for alig
         Tertiary
       </Button>
       <Textbox
-        childOfForm
         key="input-four"
         label="Field 4"
         placeholder="placeholder"
@@ -603,7 +599,6 @@ Please click on "Show code" below to see how to set these components up for alig
         mb={4}
       />
       <Textbox
-        childOfForm
         key="input-five"
         label="Field 5"
         placeholder="placeholder"
diff --git a/src/components/grouped-character/grouped-character.d.ts b/src/components/grouped-character/grouped-character.d.ts
index 97036568ce..8cb6ddde5e 100644
--- a/src/components/grouped-character/grouped-character.d.ts
+++ b/src/components/grouped-character/grouped-character.d.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { TextboxProps } from "../textbox";
 
-export interface GroupedCharacterProps extends TextboxProps {
+export interface GroupedCharacterProps extends Omit<TextboxProps, "value"> {
   /** Default input value if component is meant to be used as an uncontrolled component */
   defaultValue?: string;
   /** pattern by which input value should be grouped */
diff --git a/src/components/grouped-character/grouped-character.stories.mdx b/src/components/grouped-character/grouped-character.stories.mdx
index 8f44e40092..110e7b5ef4 100644
--- a/src/components/grouped-character/grouped-character.stories.mdx
+++ b/src/components/grouped-character/grouped-character.stories.mdx
@@ -534,8 +534,8 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <StyledSystemProps of={GroupedCharacter} noHeader margin />
 
-### Textbox
-
 Due to the `Textbox` component being used internally by the `GroupedCharacter` component most of the `Textbox` props can be applied to `GroupedCharacter`
 
 <Props of={OriginalTextbox} />
+
+**Any other supplied props will be provided to the underlying HTML input element**
diff --git a/src/components/input-definition.d.ts b/src/components/input-definition.d.ts
deleted file mode 100644
index fd50b69ac7..0000000000
--- a/src/components/input-definition.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Validator } from "../utils/validations/validation-interface";
-
-export interface InputProps {
-  value?: any;
-  /** Timeout length before onChangeDeferred is triggered. */
-  deferTimeout?: number;
-  /** Displays additional information below the input to provide help to the user. */
-  fieldHelp?: string;
-  /** Displays fieldHelp inline with the checkbox/radio button. */
-  fieldHelpInline?: boolean;
-  /** An array of info messages to apply to the input. */
-  info?: Validator[];
-  /** A number representing the percentage/ratio of width with the label. Works best with inline labels. */
-  inputWidth?: number;
-  /** Outputs a label for the input. */
-  label?: string;
-  /** Align the label either 'left' or 'right'. Only works with inline labels. */
-  labelAlign?: "left" | "right";
-  /** Output an info icon next to the label to display additional help to the user. */
-  labelHelp?: React.ReactNode;
-  /** Displays the label inline with the input. */
-  labelInline?: boolean;
-  /** A number representing the percentage/ratio of width with the input. Works best with inline labels. */
-  labelWidth?: number;
-  /** A callback which will trigger after the user has stopped typing for the duration of deferTimeout. */
-  onChangeDeferred?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** An array of validations to apply to the input. */
-  validations?: Validator[];
-  /** An array of warnings to apply to the input. */
-  warnings?: Validator[];
-}
diff --git a/src/components/number/number.stories.mdx b/src/components/number/number.stories.mdx
index 9353b69952..d5f417c3a0 100644
--- a/src/components/number/number.stories.mdx
+++ b/src/components/number/number.stories.mdx
@@ -241,7 +241,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 <Preview>
   <Story
     name="validations - string - with tooltipPosition overriden - label"
-    parameters={{ chromatic: { disable: true } }}  
+    parameters={{ chromatic: { disable: true } }}
   >
     {() =>
       ["error", "warning", "info"].map((validationType) => (
@@ -293,3 +293,5 @@ It is possible to use the `tooltipPosition` to override the default placement of
 Due to the `Textbox` component being used internally by the `Number` component all the props of `Textbox` can be applied to `Number` as well.
 
 <Props of={OriginalTextbox} />
+
+**Any other supplied props will be provided to the underlying HTML input element**
diff --git a/src/components/numeral-date/numeral-date.component.js b/src/components/numeral-date/numeral-date.component.js
index 23158dfa49..a17ea08f04 100644
--- a/src/components/numeral-date/numeral-date.component.js
+++ b/src/components/numeral-date/numeral-date.component.js
@@ -39,8 +39,12 @@ const validations = {
 const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
+  disabled,
   error = "",
   warning = "",
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
   info,
   id,
   name,
@@ -53,9 +57,11 @@ const NumeralDate = ({
   labelWidth,
   labelAlign,
   labelHelp,
+  labelSpacing,
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  readOnly,
   size,
   enableInternalError,
   enableInternalWarning,
@@ -166,16 +172,21 @@ const NumeralDate = ({
   return (
     <InputGroupBehaviour>
       <FormField
-        label={label}
+        data-component={dataComponent}
+        data-element={dataElement}
+        data-role={dataRole}
+        disabled={disabled}
         useValidationIcon={validationOnLabel}
         id={uniqueId}
         error={internalError}
         warning={internalWarning}
         info={info}
+        label={label}
         labelInline={labelInline}
         labelWidth={labelWidth}
         labelAlign={labelAlign}
         labelHelp={labelHelp}
+        labelSpacing={labelSpacing}
         fieldHelp={fieldHelp}
         adaptiveLabelBreakpoint={adaptiveLabelBreakpoint}
         isRequired={required}
@@ -204,6 +215,8 @@ const NumeralDate = ({
               >
                 <Textbox
                   {...(index === 0 && { id: uniqueId })}
+                  disabled={disabled}
+                  readOnly={readOnly}
                   placeholder={datePart}
                   value={dateValue[datePart]}
                   onChange={(e) => handleChange(e, datePart)}
@@ -236,6 +249,16 @@ const NumeralDate = ({
 NumeralDate.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+  /** If true, the component will be disabled */
+  disabled: PropTypes.bool,
+  /** If true, the component will be read-only */
+  readOnly: PropTypes.bool,
   /** Array of strings to define custom input layout.
   Allowed formats:
   ['dd', 'mm', 'yyyy'],
@@ -304,6 +327,8 @@ NumeralDate.propTypes = {
   labelAlign: PropTypes.oneOf(["left", "right"]),
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth: PropTypes.number,
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing: PropTypes.oneOf([1, 2]),
   /** Help content to be displayed under an input */
   fieldHelp: PropTypes.node,
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
diff --git a/src/components/numeral-date/numeral-date.d.ts b/src/components/numeral-date/numeral-date.d.ts
index 1d97c050e5..48f0339afb 100644
--- a/src/components/numeral-date/numeral-date.d.ts
+++ b/src/components/numeral-date/numeral-date.d.ts
@@ -25,6 +25,16 @@ interface NumeralDateEvent {
 }
 
 export interface NumeralDateProps extends ValidationPropTypes, MarginProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+  /** If true, the component will be disabled */
+  disabled?: boolean;
+  /** If true, the component will be read-only */
+  readOnly?: boolean;
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
   /* Array of strings to define custom input layout.
@@ -64,7 +74,9 @@ export interface NumeralDateProps extends ValidationPropTypes, MarginProps {
   labelInline?: boolean;
   /** Label width */
   labelWidth?: number;
-  /** Blur event handler  */
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing?: 1 | 2;
+  /** Blur event handler */
   onBlur?: (ev: NumeralDateEvent) => void;
   /** Change event handler */
   onChange?: (ev: NumeralDateEvent) => void;
diff --git a/src/components/pager/pager.component.js b/src/components/pager/pager.component.js
index f071454bd8..162e690d96 100644
--- a/src/components/pager/pager.component.js
+++ b/src/components/pager/pager.component.js
@@ -1,5 +1,7 @@
 import React, { useState, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
+
+import { Select } from "../select";
 import PagerNavigation from "./__internal__/pager-navigation.component";
 import Option from "../select/option/option.component";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -8,7 +10,7 @@ import {
   StyledPagerSizeOptions,
   StyledPagerSummary,
   StyledPagerSizeOptionsInner,
-  StyledSelect,
+  StyledSelectContainer,
 } from "./pager.style";
 import Events from "../../utils/helpers/events/events";
 
@@ -129,23 +131,25 @@ const Pager = ({
 
   const sizeSelector = () => {
     return (
-      <StyledSelect
-        value={String(value)}
-        onChange={(ev) => setValue(ev.target.value)}
-        onBlur={() => setValue(currentPageSize)}
-        onKeyDown={handleKeyDown}
-        data-element="page-select"
-        id="page-select"
-      >
-        {pageSizeSelectionOptions.map((sizeOption) => (
-          <Option
-            key={sizeOption.id}
-            text={sizeOption.id}
-            value={String(sizeOption.name)}
-            onClick={handleOnPagination}
-          />
-        ))}
-      </StyledSelect>
+      <StyledSelectContainer>
+        <Select
+          value={String(value)}
+          onChange={(ev) => setValue(ev.target.value)}
+          onBlur={() => setValue(currentPageSize)}
+          onKeyDown={handleKeyDown}
+          data-element="page-select"
+          id="page-select"
+        >
+          {pageSizeSelectionOptions.map((sizeOption) => (
+            <Option
+              key={sizeOption.id}
+              text={sizeOption.id}
+              value={String(sizeOption.name)}
+              onClick={handleOnPagination}
+            />
+          ))}
+        </Select>
+      </StyledSelectContainer>
     );
   };
 
diff --git a/src/components/pager/pager.spec.js b/src/components/pager/pager.spec.js
index dae7bf91d3..e47ed29748 100644
--- a/src/components/pager/pager.spec.js
+++ b/src/components/pager/pager.spec.js
@@ -11,7 +11,7 @@ import {
   StyledPagerLinkStyles,
   StyledPagerSizeOptionsInner,
   StyledPagerSummary,
-  StyledSelect,
+  StyledSelectContainer,
 } from "./pager.style";
 import NumberInput from "../number";
 import StyledOption from "../select/option/option.style";
@@ -67,7 +67,7 @@ describe("Pager", () => {
         showPageSizeSelection: true,
         pageSize: 10,
       });
-      expect(wrapper.find(StyledSelect).prop("value")).toBe("10");
+      expect(wrapper.find(Select).prop("value")).toBe("10");
     });
 
     it("when page size prop is a type of string", () => {
@@ -75,7 +75,7 @@ describe("Pager", () => {
         showPageSizeSelection: true,
         pageSize: "10",
       });
-      expect(wrapper.find(StyledSelect).prop("value")).toBe("10");
+      expect(wrapper.find(Select).prop("value")).toBe("10");
     });
   });
 
@@ -186,10 +186,10 @@ describe("Pager", () => {
 
     it("updates value when pageSize prop is changed", () => {
       wrapper = getWrapper();
-      expect(wrapper.find(StyledSelect).prop("value")).toBe("10");
+      expect(wrapper.find(Select).prop("value")).toBe("10");
       wrapper.setProps({ pageSize: 25 });
       wrapper.update();
-      expect(wrapper.find(StyledSelect).prop("value")).toBe("25");
+      expect(wrapper.find(Select).prop("value")).toBe("25");
     });
   });
 
@@ -269,15 +269,15 @@ describe("Pager", () => {
     it("renders the pageSize Select when 'showPageSizeSelection' is true", () => {
       wrapper = render({ ...props, onPagination: () => true });
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.firstChild.textContent
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().firstChild
+          .textContent
       ).toEqual(
         wrapper.find(StyledPagerSizeOptionsInner).find("span").first().text()
       );
       expect(wrapper.find(StyledPagerSizeOptionsInner).exists()).toBeTruthy();
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.lastChild.textContent
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().lastChild
+          .textContent
       ).toEqual(
         wrapper.find(StyledPagerSizeOptionsInner).find("span").last().text()
       );
@@ -289,15 +289,14 @@ describe("Pager", () => {
         showPageSizeLabelBefore: false,
         onPagination: () => true,
       });
+
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.firstChild
-      ).toEqual(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-      );
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().firstChild
+      ).toEqual(wrapper.find(StyledSelectContainer).getDOMNode());
+
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.lastChild.textContent
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().lastChild
+          .textContent
       ).toEqual(
         wrapper.find(StyledPagerSizeOptionsInner).find("span").last().text()
       );
@@ -310,17 +309,14 @@ describe("Pager", () => {
         onPagination: () => true,
       });
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.firstChild.textContent
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().firstChild
+          .textContent
       ).toEqual(
         wrapper.find(StyledPagerSizeOptionsInner).find("span").first().text()
       );
       expect(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-          .parentElement.lastChild
-      ).toEqual(
-        wrapper.find("div[data-component='simple-select']").getDOMNode()
-      );
+        wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().lastChild
+      ).toEqual(wrapper.find(StyledSelectContainer).getDOMNode());
     });
 
     it("does not render the total number of records 'showTotalRecords' is false", () => {
@@ -404,11 +400,11 @@ describe("Pager", () => {
 
   describe("i18n", () => {
     const getShow = (wrapper) =>
-      wrapper.find("div[data-component='simple-select']").getDOMNode()
-        .parentElement.firstChild.textContent;
+      wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().firstChild
+        .textContent;
     const getRecords = (wrapper) =>
-      wrapper.find("div[data-component='simple-select']").getDOMNode()
-        .parentElement.lastChild.textContent;
+      wrapper.find(StyledPagerSizeOptionsInner).getDOMNode().lastChild
+        .textContent;
 
     describe("default", () => {
       it("show", () => {
diff --git a/src/components/pager/pager.style.js b/src/components/pager/pager.style.js
index c69d3602e3..a92fc712b7 100644
--- a/src/components/pager/pager.style.js
+++ b/src/components/pager/pager.style.js
@@ -2,10 +2,9 @@ import styled, { css } from "styled-components";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import Select from "../select/simple-select/simple-select.component";
 import baseTheme from "../../style/themes/base";
 
-const StyledSelect = styled(Select)`
+const StyledSelectContainer = styled.div`
   height: 26px;
 
   ${StyledInputPresentation} {
@@ -229,5 +228,5 @@ export {
   StyledPagerLinkStyles,
   StyledPagerNoSelect,
   StyledPagerSummary,
-  StyledSelect,
+  StyledSelectContainer,
 };
diff --git a/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap
index 9db2acbfef..f763c07a26 100644
--- a/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap
+++ b/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap
@@ -244,7 +244,6 @@ exports[`RadioButtonGroup renders as expected 1`] = `
               <input
                 aria-checked={false}
                 aria-describedby="rId-0 help"
-                aria-labelledby="rId-0 label"
                 checked={false}
                 className="c12 c13"
                 id="rId-0"
@@ -305,7 +304,6 @@ exports[`RadioButtonGroup renders as expected 1`] = `
               <input
                 aria-checked={false}
                 aria-describedby="rId-1 help"
-                aria-labelledby="rId-1 label"
                 checked={false}
                 className="c12 c13"
                 id="rId-1"
diff --git a/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap
index 69811922e7..4f2fdcf920 100644
--- a/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap
+++ b/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap
@@ -183,7 +183,6 @@ Array [
             <input
               aria-checked={false}
               aria-describedby="rId-0 help"
-              aria-labelledby="rId-0 label"
               checked={false}
               className="c8 c9"
               id="rId-0"
@@ -406,7 +405,6 @@ Array [
             <input
               aria-checked={false}
               aria-describedby="rId-1 help"
-              aria-labelledby="rId-1 label"
               checked={false}
               className="c8 c9"
               id="rId-1"
diff --git a/src/components/radio-button/__snapshots__/radio-button.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button.spec.js.snap
index d05f29e31f..9f3a98eee6 100644
--- a/src/components/radio-button/__snapshots__/radio-button.spec.js.snap
+++ b/src/components/radio-button/__snapshots__/radio-button.spec.js.snap
@@ -459,7 +459,6 @@ exports[`RadioButton base renders as expected 1`] = `
               <input
                 aria-checked={false}
                 aria-describedby="guid-12345 help"
-                aria-labelledby="guid-12345 label"
                 checked={false}
                 className="c10 c11"
                 id="guid-12345"
diff --git a/src/components/radio-button/radio-button.component.js b/src/components/radio-button/radio-button.component.js
index 711a1f2442..8e1fdb88dc 100644
--- a/src/components/radio-button/radio-button.component.js
+++ b/src/components/radio-button/radio-button.component.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
-import tagComponent from "../../utils/helpers/tags";
+
 import RadioButtonStyle from "./radio-button.style";
 import CheckableInput from "../../__internal__/checkable-input/checkable-input.component";
 import RadioButtonSvg from "./radio-button-svg.component";
@@ -24,6 +24,7 @@ const radioButtonGroupPassedProps = {
 const RadioButton = React.forwardRef(
   (
     {
+      autoFocus,
       checked,
       disabled,
       fieldHelp,
@@ -32,12 +33,14 @@ const RadioButton = React.forwardRef(
       inline,
       inputWidth,
       label,
+      labelHelp,
       labelAlign,
       labelSpacing,
       labelWidth,
       name,
       onChange,
       onBlur,
+      onFocus,
       value,
       reverse,
       required,
@@ -46,6 +49,9 @@ const RadioButton = React.forwardRef(
       warning,
       info,
       tooltipPosition,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...props
     },
     ref
@@ -72,19 +78,21 @@ const RadioButton = React.forwardRef(
 
     const inputProps = {
       ...commonProps,
+      autoFocus,
       checked,
       fieldHelp,
       name,
       onChange: handleChange,
       onBlur,
-      helpTag: "span",
+      onFocus,
       labelAlign,
       labelInline: true,
       labelWidth,
-      inputId: id,
       label,
-      inputValue: value,
-      inputType: "radio",
+      labelHelp,
+      id,
+      value,
+      type: "radio",
       /**
        * Invert the reverse prop, to ensure the FormField component renders the components
        * in the desired order (other elements which use FormField render their sub-components the
@@ -93,17 +101,20 @@ const RadioButton = React.forwardRef(
       reverse: !reverse,
       required,
       inputRef: ref,
+      ...props,
     };
 
     return (
       <TooltipProvider tooltipPosition={tooltipPosition}>
         <RadioButtonStyle
+          data-component={dataComponent}
+          data-role={dataRole}
+          data-element={dataElement}
           inline={inline}
           reverse={reverse}
           size={size}
           {...commonProps}
           {...marginProps}
-          {...tagComponent("radio-button", props)}
         >
           <CheckableInput {...inputProps}>
             <RadioButtonSvg />
@@ -118,6 +129,14 @@ RadioButton.displayName = "RadioButton";
 
 RadioButton.propTypes = {
   ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+  /** If true the Component will be focused when page load */
+  autoFocus: PropTypes.bool,
   /** Set the value of the radio button */
   checked: PropTypes.bool,
   /** Toggles disabling of input */
@@ -132,6 +151,8 @@ RadioButton.propTypes = {
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** The content of the label for the input */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The content for the help tooltip, to appear next to the Label */
+  labelHelp: PropTypes.node,
   /** Sets label alignment - accepted values: 'left' (default), 'right' */
   labelAlign: PropTypes.oneOf(["left", "right"]),
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
@@ -144,6 +165,10 @@ RadioButton.propTypes = {
   onChange: PropTypes.func,
   /** Accepts a callback function which is triggered on blur event */
   onBlur: PropTypes.func,
+  /** Accepts a callback function which is triggered on focus event */
+  onFocus: PropTypes.func,
+  /** Accepts a callback function which is triggered on click event */
+  onClick: PropTypes.func,
   /** Reverses label and radio button display */
   reverse: PropTypes.bool,
   /**
@@ -171,6 +196,7 @@ RadioButton.propTypes = {
 RadioButton.defaultProps = {
   reverse: false,
   labelSpacing: 1,
+  "data-component": "radio-button",
 };
 
 export { RadioButton as PrivateRadioButton };
diff --git a/src/components/radio-button/radio-button.d.ts b/src/components/radio-button/radio-button.d.ts
index 9e05e5008e..16bc038280 100644
--- a/src/components/radio-button/radio-button.d.ts
+++ b/src/components/radio-button/radio-button.d.ts
@@ -1,24 +1,28 @@
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 
-export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps {
-  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
-  id?: string;
+export interface RadioButtonProps
+  extends CommonCheckableInputProps,
+    MarginProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** When true, sets the component in line (for RadioButtonGroup) */
   inline?: boolean;
   /** Text alignment of the label */
   labelAlign?: "left" | "right";
-  /**
-   * Set the size of the radio button to 'small' (16x16 - default) or 'large' (24x24).
-   */
-  size?: "small" | "large";
   /** the value of the Radio Button, passed on form submit */
   value: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function RadioButton(props: RadioButtonProps & React.RefAttributes<HTMLInputElement>): JSX.Element;
+declare function RadioButton(
+  props: RadioButtonProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
 
 export { RadioButton as PrivateRadioButton };
 export default RadioButton;
diff --git a/src/components/radio-button/radio-button.stories.mdx b/src/components/radio-button/radio-button.stories.mdx
index 7683b2ea89..e26f34087c 100644
--- a/src/components/radio-button/radio-button.stories.mdx
+++ b/src/components/radio-button/radio-button.stories.mdx
@@ -545,6 +545,8 @@ Labels could be customized using the Typography Component
 
 <StyledSystemProps of={PrivateRadioButton} margin noHeader />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ### RadioButtonGroup
 
 <StyledSystemProps of={RadioButtonGroup} margin noHeader />
diff --git a/src/components/select/filterable-select/filterable-select.component.js b/src/components/select/filterable-select/filterable-select.component.js
index 3c0a67337d..0b610b6105 100644
--- a/src/components/select/filterable-select/filterable-select.component.js
+++ b/src/components/select/filterable-select/filterable-select.component.js
@@ -1,6 +1,11 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+
+import {
+  filterStyledSystemMarginProps,
+  filterOutStyledSystemSpacingProps,
+} from "../../../style/utils";
 import SelectTextbox, {
   formInputPropTypes,
 } from "../select-textbox/select-textbox.component";
@@ -38,6 +43,9 @@ const FilterableSelect = React.forwardRef(
       onListScrollBottom,
       tableHeader,
       multiColumn,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       tooltipPosition,
       ...textboxProps
     },
@@ -455,7 +463,7 @@ const FilterableSelect = React.forwardRef(
         onChange: handleTextboxChange,
         onMouseDown: handleTextboxMouseDown,
         tooltipPosition,
-        ...textboxProps,
+        ...filterOutStyledSystemSpacingProps(textboxProps),
       };
     }
 
@@ -495,14 +503,16 @@ const FilterableSelect = React.forwardRef(
 
     return (
       <StyledSelect
-        data-component="filterable-select"
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         ref={containerRef}
         hasTextCursor
         readOnly={readOnly}
         disabled={disabled}
-        {...textboxProps}
+        data-component={dataComponent}
+        data-role={dataRole}
+        data-element={dataElement}
+        {...filterStyledSystemMarginProps(textboxProps)}
       >
         <SelectTextbox
           aria-controls={isOpen ? selectListId.current : ""}
@@ -519,6 +529,12 @@ const FilterableSelect = React.forwardRef(
 
 FilterableSelect.propTypes = {
   ...formInputPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: PropTypes.bool,
   /** The selected value(s), when the component is operating in controlled mode */
@@ -553,4 +569,8 @@ FilterableSelect.propTypes = {
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 };
 
+FilterableSelect.defaultProps = {
+  "data-component": "filterable-select",
+};
+
 export default FilterableSelect;
diff --git a/src/components/select/filterable-select/filterable-select.d.ts b/src/components/select/filterable-select/filterable-select.d.ts
index bd3befa9c7..59b2f1f1e7 100644
--- a/src/components/select/filterable-select/filterable-select.d.ts
+++ b/src/components/select/filterable-select/filterable-select.d.ts
@@ -2,7 +2,14 @@ import * as React from "react";
 import Button from "../../button";
 import { FormInputPropTypes } from "../select-textbox/select-textbox";
 
-export interface FilterableSelectProps extends FormInputPropTypes {
+export interface FilterableSelectProps
+  extends Omit<FormInputPropTypes, "defaultValue"> {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: React.ReactNode;
   /** The default selected value(s), when the component is operating in uncontrolled mode */
@@ -39,6 +46,8 @@ export interface FilterableSelectProps extends FormInputPropTypes {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function FilterableSelect(props: FilterableSelectProps & React.RefAttributes<HTMLInputElement>): JSX.Element;
+declare function FilterableSelect(
+  props: FilterableSelectProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
 
 export default FilterableSelect;
diff --git a/src/components/select/filterable-select/filterable-select.stories.mdx b/src/components/select/filterable-select/filterable-select.stories.mdx
index 6bc07d9876..fa87aacab1 100644
--- a/src/components/select/filterable-select/filterable-select.stories.mdx
+++ b/src/components/select/filterable-select/filterable-select.stories.mdx
@@ -606,40 +606,40 @@ If there is no `id` prop specified on an object, then the exact objects will be
 
 <StyledSystemProps of={FilterableSelect} noHeader margin />
 
-### Props derived from the Textbox Component
+Due to the `Textbox` component being used internally by the `FilterableSelect` component, most of the `Textbox` props are applicable to `FilterableSelect`
 
 <Props of={SelectTextbox} />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ### Props of the Option Component
 
 <Props of={Option} />
 
 ## Translation keys
 
-The following keys are available to override the translations for this component by passing in a custom locale object to the 
+The following keys are available to override the translations for this component by passing in a custom locale object to the
 [i18nProvider](https://carbon.sage.com/?path=/story/documentation-i18n--page).
 
 <TranslationKeysTable
-  translationData={
-    [
-      {
-        name: "select.actionButtonText",
-        description: "The text for the action button component",
-        type: "func",
-        returnType: "string"
-      },
-      {
-        name: "select.placeholder",
-        description: "The text for the input component placeholder",
-        type: "func",
-        returnType: "string"
-      },
-      {
-        name: "select.noResultsForTerm",
-        description: "The text displayed when search term returns no results",
-        type: "func",
-        returnType: "string"
-      },
-    ]
-  }
+  translationData={[
+    {
+      name: "select.actionButtonText",
+      description: "The text for the action button component",
+      type: "func",
+      returnType: "string",
+    },
+    {
+      name: "select.placeholder",
+      description: "The text for the input component placeholder",
+      type: "func",
+      returnType: "string",
+    },
+    {
+      name: "select.noResultsForTerm",
+      description: "The text displayed when search term returns no results",
+      type: "func",
+      returnType: "string",
+    },
+  ]}
 />
diff --git a/src/components/select/multi-select/multi-select.component.js b/src/components/select/multi-select/multi-select.component.js
index ae807d9303..feb79f7dd8 100644
--- a/src/components/select/multi-select/multi-select.component.js
+++ b/src/components/select/multi-select/multi-select.component.js
@@ -1,6 +1,11 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+
+import {
+  filterStyledSystemMarginProps,
+  filterOutStyledSystemSpacingProps,
+} from "../../../style/utils";
 import SelectTextbox, {
   formInputPropTypes,
 } from "../select-textbox/select-textbox.component";
@@ -42,6 +47,10 @@ const MultiSelect = React.forwardRef(
       tableHeader,
       multiColumn,
       tooltipPosition,
+      size,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...textboxProps
     },
     inputRef
@@ -445,7 +454,8 @@ const MultiSelect = React.forwardRef(
         onKeyDown: handleTextboxKeydown,
         onChange: handleTextboxChange,
         tooltipPosition,
-        ...textboxProps,
+        size,
+        ...filterOutStyledSystemSpacingProps(textboxProps),
       };
     }
 
@@ -483,14 +493,17 @@ const MultiSelect = React.forwardRef(
 
     return (
       <StyledSelectMultiSelect
-        data-component="multiselect"
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         ref={containerRef}
         disabled={disabled}
         readOnly={readOnly}
         hasTextCursor
-        {...textboxProps}
+        size={size}
+        data-component={dataComponent}
+        data-role={dataRole}
+        data-element={dataElement}
+        {...filterStyledSystemMarginProps(textboxProps)}
       >
         <SelectTextbox
           aria-controls={isOpen ? selectListId.current : ""}
@@ -507,6 +520,12 @@ const MultiSelect = React.forwardRef(
 
 MultiSelect.propTypes = {
   ...formInputPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: PropTypes.bool,
   /** The selected value(s), when the component is operating in controlled mode */
@@ -541,4 +560,8 @@ MultiSelect.propTypes = {
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 };
 
+MultiSelect.defaultProps = {
+  "data-component": "multiselect",
+};
+
 export default MultiSelect;
diff --git a/src/components/select/multi-select/multi-select.d.ts b/src/components/select/multi-select/multi-select.d.ts
index 582f8d0297..a274a048a4 100644
--- a/src/components/select/multi-select/multi-select.d.ts
+++ b/src/components/select/multi-select/multi-select.d.ts
@@ -1,7 +1,16 @@
 import * as React from "react";
 import { FormInputPropTypes } from "../select-textbox/select-textbox";
 
-export interface MultiSelectProps extends FormInputPropTypes {
+export interface MultiSelectProps
+  extends Omit<FormInputPropTypes, "defaultValue"> {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+  /** Size of an input */
+  size?: "small" | "medium" | "large";
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: React.ReactNode;
   /** The default selected value(s), when the component is operating in uncontrolled mode */
@@ -32,6 +41,8 @@ export interface MultiSelectProps extends FormInputPropTypes {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function MultiSelect(props: MultiSelectProps & React.RefAttributes<HTMLInputElement>): JSX.Element;
+declare function MultiSelect(
+  props: MultiSelectProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
 
 export default MultiSelect;
diff --git a/src/components/select/multi-select/multi-select.stories.mdx b/src/components/select/multi-select/multi-select.stories.mdx
index 685e794177..dff7cc30d7 100644
--- a/src/components/select/multi-select/multi-select.stories.mdx
+++ b/src/components/select/multi-select/multi-select.stories.mdx
@@ -483,28 +483,28 @@ See <LinkTo kind='Documentation/Colors' name="page">Colors</LinkTo> for more inf
 
 <StyledSystemProps of={MultiSelect} noHeader margin />
 
-### Props derived from the Textbox Component
+Due to the `Textbox` component being used internally by the `MultiSelect` component, most of the `Textbox` props are applicable to `MultiSelect`
 
 <Props of={SelectTextbox} />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ### Props of the Option Component
 
 <Props of={Option} />
 
 ## Translation keys
 
-The following keys are available to override the translations for this component by passing in a custom locale object to the 
+The following keys are available to override the translations for this component by passing in a custom locale object to the
 [i18nProvider](https://carbon.sage.com/?path=/story/documentation-i18n--page).
 
 <TranslationKeysTable
-  translationData={
-    [
-      {
-        name: "select.placeholder",
-        description: "The text for the input component placeholder",
-        type: "func",
-        returnType: "string"
-      },
-    ]
-  }
+  translationData={[
+    {
+      name: "select.placeholder",
+      description: "The text for the input component placeholder",
+      type: "func",
+      returnType: "string",
+    },
+  ]}
 />
diff --git a/src/components/select/select-textbox/select-textbox.component.js b/src/components/select/select-textbox/select-textbox.component.js
index c797cbcb5c..cb6f3e3e91 100644
--- a/src/components/select/select-textbox/select-textbox.component.js
+++ b/src/components/select/select-textbox/select-textbox.component.js
@@ -8,6 +8,7 @@ const SelectTextbox = ({
   disabled,
   readOnly,
   placeholder,
+  labelId,
   size,
   onClick,
   onFocus,
@@ -51,6 +52,7 @@ const SelectTextbox = ({
       onClick: handleTextboxClick,
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
+      labelId,
       ...restProps,
     };
   }
@@ -78,6 +80,13 @@ const formInputPropTypes = {
   disabled: PropTypes.bool,
   /** If true the Component will be focused when rendered */
   autoFocus: PropTypes.bool,
+  /**
+   * Label id passed from Select component
+   * @private
+   * @ignore
+   *
+   */
+  labelId: PropTypes.string,
   /** Label */
   label: PropTypes.string,
   /** Text applied to label help tooltip */
diff --git a/src/components/select/select-textbox/select-textbox.d.ts b/src/components/select/select-textbox/select-textbox.d.ts
index 0bab097db1..0813dcc8e7 100644
--- a/src/components/select/select-textbox/select-textbox.d.ts
+++ b/src/components/select/select-textbox/select-textbox.d.ts
@@ -1,8 +1,11 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+
+import { CommonTextboxProps } from "../../textbox";
 import { ValidationPropTypes } from "../../../__internal__/validations";
 
-export interface FormInputPropTypes extends ValidationPropTypes, SpaceProps {
+export interface FormInputPropTypes
+  extends ValidationPropTypes,
+    CommonTextboxProps {
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
   /** If true the Component will be focused when rendered */
diff --git a/src/components/select/simple-select/simple-select.component.js b/src/components/select/simple-select/simple-select.component.js
index 10daddc8ca..7fd395f378 100644
--- a/src/components/select/simple-select/simple-select.component.js
+++ b/src/components/select/simple-select/simple-select.component.js
@@ -9,6 +9,10 @@ import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import invariant from "invariant";
 
+import {
+  filterStyledSystemMarginProps,
+  filterOutStyledSystemSpacingProps,
+} from "../../../style/utils";
 import StyledSelect from "../select.style";
 import SelectTextbox, {
   formInputPropTypes,
@@ -42,6 +46,9 @@ const SimpleSelect = React.forwardRef(
       tableHeader,
       multiColumn,
       tooltipPosition,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...props
     },
     inputRef
@@ -378,7 +385,7 @@ const SimpleSelect = React.forwardRef(
         onChange: handleTextboxChange,
         onBlur: handleTextboxBlur,
         tooltipPosition,
-        ...props,
+        ...filterOutStyledSystemSpacingProps(props),
       };
     }
     const selectList = (
@@ -404,14 +411,16 @@ const SimpleSelect = React.forwardRef(
 
     return (
       <StyledSelect
-        data-component="simple-select"
         transparent={transparent}
         disabled={disabled}
         readOnly={readOnly}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         ref={containerRef}
-        {...props}
+        data-component={dataComponent}
+        data-role={dataRole}
+        data-element={dataElement}
+        {...filterStyledSystemMarginProps(props)}
       >
         <SelectTextbox
           aria-controls={isOpen ? selectListId.current : ""}
@@ -430,6 +439,12 @@ SimpleSelect.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
   ...formInputPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** The selected value(s), when the component is operating in controlled mode */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
@@ -460,6 +475,7 @@ SimpleSelect.propTypes = {
 
 SimpleSelect.defaultProps = {
   disablePortal: false,
+  "data-component": "simple-select",
 };
 
 export default SimpleSelect;
diff --git a/src/components/select/simple-select/simple-select.d.ts b/src/components/select/simple-select/simple-select.d.ts
index 054e5c23ec..e29886efc8 100644
--- a/src/components/select/simple-select/simple-select.d.ts
+++ b/src/components/select/simple-select/simple-select.d.ts
@@ -1,7 +1,14 @@
 import * as React from "react";
 import { FormInputPropTypes } from "../select-textbox/select-textbox";
 
-export interface SimpleSelectProps extends FormInputPropTypes {
+export interface SimpleSelectProps
+  extends Omit<FormInputPropTypes, "defaultValue"> {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: React.ReactNode;
   /** The default selected value(s), when the component is operating in uncontrolled mode */
@@ -20,8 +27,6 @@ export interface SimpleSelectProps extends FormInputPropTypes {
   onOpen?: () => void;
   /** If true the Component opens on focus */
   openOnFocus?: boolean;
-  /** A custom message to be displayed when any option does not match the filter text */
-  noResultsMessage?: string;
   /** SelectList table header, should consist of multiple th elements.
    * Works only in multiColumn mode
    */
@@ -34,6 +39,8 @@ export interface SimpleSelectProps extends FormInputPropTypes {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function SimpleSelect(props: SimpleSelectProps & React.RefAttributes<HTMLInputElement>): JSX.Element;
+declare function SimpleSelect(
+  props: SimpleSelectProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
 
 export default SimpleSelect;
diff --git a/src/components/select/simple-select/simple-select.stories.mdx b/src/components/select/simple-select/simple-select.stories.mdx
index 2af81c7825..c57ecfcc68 100644
--- a/src/components/select/simple-select/simple-select.stories.mdx
+++ b/src/components/select/simple-select/simple-select.stories.mdx
@@ -612,28 +612,28 @@ The inline label can change to be top aligned at a breakpoint. Enable this by pa
 
 <StyledSystemProps noHeader of={Select} margin />
 
-### Props derived from the Textbox Component
+Due to the `Textbox` component being used internally by the `SimpleSelect` component, most of the `Textbox` props are applicable to `SimpleSelect`
 
 <Props of={SelectTextbox} />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ### Props of the Option Component
 
 <Props of={Option} />
 
 ## Translation keys
 
-The following keys are available to override the translations for this component by passing in a custom locale object to the 
+The following keys are available to override the translations for this component by passing in a custom locale object to the
 [i18nProvider](https://carbon.sage.com/?path=/story/documentation-i18n--page).
 
 <TranslationKeysTable
-  translationData={
-    [
-      {
-        name: "select.placeholder",
-        description: "The text for the input component placeholder",
-        type: "func",
-        returnType: "string"
-      },
-    ]
-  }
+  translationData={[
+    {
+      name: "select.placeholder",
+      description: "The text for the input component placeholder",
+      type: "func",
+      returnType: "string",
+    },
+  ]}
 />
diff --git a/src/components/switch/__internal__/switch-slider.component.js b/src/components/switch/__internal__/switch-slider.component.js
index 1c5e2f887d..7cc4e7a897 100644
--- a/src/components/switch/__internal__/switch-slider.component.js
+++ b/src/components/switch/__internal__/switch-slider.component.js
@@ -1,30 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 
 import Loader from "../../loader/loader.component";
 import StyledSwitchSlider from "./switch-slider.style";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 import ValidationIcon from "../../../__internal__/validations/validation-icon.component";
-import { filterStyledSystemMarginProps } from "../../../style/utils";
 import useLocale from "../../../hooks/__internal__/useLocale";
 
-const marginPropTypes = filterStyledSystemMarginProps(
-  styledSystemPropTypes.space
-);
-
-const SwitchSlider = (props) => {
+const SwitchSlider = ({
+  checked,
+  disabled,
+  loading,
+  size,
+  error,
+  warning,
+  info,
+  useValidationIcon,
+}) => {
   const l = useLocale();
-  const {
-    checked,
-    disabled,
-    loading,
-    size,
-    error,
-    warning,
-    info,
-    useValidationIcon,
-  } = props;
 
   const panelContent = checked ? l.switch.on() : l.switch.off();
 
@@ -47,9 +40,8 @@ const SwitchSlider = (props) => {
 
   const loaderProps = {
     isInsideButton: true,
-    isActive: props.checked,
+    isActive: checked,
     size,
-    ...filterStyledSystemMarginProps(props),
   };
 
   const sliderContent = (
@@ -59,17 +51,14 @@ const SwitchSlider = (props) => {
   );
 
   return (
-    <StyledSwitchSlider
-      {...switchSliderStyleProps}
-      {...filterStyledSystemMarginProps(props)}
-    >
+    <StyledSwitchSlider {...switchSliderStyleProps}>
       {sliderContent}
       {useValidationIcon && (
         <ValidationIcon
           error={error}
           warning={warning}
           info={info}
-          size={props.size}
+          size={size}
           tooltipFlipOverrides={["top", "bottom"]}
         />
       )}
@@ -78,8 +67,6 @@ const SwitchSlider = (props) => {
 };
 
 SwitchSlider.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   loading: PropTypes.bool,
diff --git a/src/components/switch/switch.component.js b/src/components/switch/switch.component.js
index 9aaaade004..7d4779cc52 100644
--- a/src/components/switch/switch.component.js
+++ b/src/components/switch/switch.component.js
@@ -1,17 +1,25 @@
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../utils/helpers/tags";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
 import SwitchStyle from "./switch.style";
 import CheckableInput from "../../__internal__/checkable-input";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Switch = ({
+  autoFocus,
   id,
   label,
   onChange,
   onBlur,
+  onFocus,
   value,
   checked,
   defaultChecked,
@@ -20,9 +28,19 @@ const Switch = ({
   reverse,
   validationOnLabel,
   labelInline,
+  labelSpacing,
+  labelHelp,
+  fieldHelpInline,
+  size,
   name,
   adaptiveLabelBreakpoint,
   tooltipPosition,
+  error,
+  warning,
+  info,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   const isControlled = checked !== undefined;
@@ -40,46 +58,67 @@ const Switch = ({
   );
 
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
-  let inlineLabel = labelInline;
+  let shouldLabelBeInline = labelInline;
   if (adaptiveLabelBreakpoint) {
-    inlineLabel = largeScreen;
+    shouldLabelBeInline = largeScreen;
   }
 
-  const switchProps = {
-    ...rest,
-    labelInline: inlineLabel,
-    disabled: disabled || loading,
+  const shouldValidationBeOnLabel =
+    labelInline && !reverse ? true : validationOnLabel;
+
+  const switchStyleProps = {
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
     checked: isControlled ? checked : checkedInternal,
+    fieldHelpInline,
+    labelInline: shouldLabelBeInline,
+    labelSpacing,
     reverse: !reverse, // switched to preserve backward compatibility
+    size,
+    ...filterStyledSystemMarginProps(rest),
+  };
+
+  const switchSliderProps = {
+    checked: isControlled ? checked : checkedInternal,
+    disabled: disabled || loading,
+    loading,
+    size,
+    error,
+    warning,
+    info,
+    useValidationIcon: !shouldValidationBeOnLabel && !disabled,
   };
 
   const inputProps = {
-    ...switchProps,
+    autoFocus,
+    error,
+    warning,
+    info,
+    disabled: disabled || loading,
+    checked: isControlled ? checked : checkedInternal,
+    fieldHelpInline,
+    labelInline: shouldLabelBeInline,
+    labelSpacing,
     onBlur,
+    onFocus,
     onChange: isControlled ? onChange : onChangeInternal,
-    inputId: id,
+    id,
     name,
     label,
-    inputValue: value,
-    inputType: "checkbox",
+    labelHelp,
+    value,
+    type: "checkbox",
     reverse: !reverse, // switched to preserve backward compatibility
+    validationOnLabel: shouldValidationBeOnLabel && !disabled,
+    ...rest,
   };
 
-  const shouldValidationBeOnLabel =
-    labelInline && !reverse ? true : validationOnLabel;
-
   return (
     <TooltipProvider tooltipPosition={tooltipPosition}>
-      <SwitchStyle {...tagComponent("Switch", rest)} {...switchProps}>
-        <CheckableInput
-          validationOnLabel={shouldValidationBeOnLabel && !disabled}
-          {...inputProps}
-        >
-          <SwitchSlider
-            useValidationIcon={!shouldValidationBeOnLabel && !disabled}
-            {...switchProps}
-            loading={loading}
-          />
+      <SwitchStyle {...switchStyleProps}>
+        <CheckableInput {...inputProps}>
+          <SwitchSlider {...switchSliderProps} />
         </CheckableInput>
       </SwitchStyle>
     </TooltipProvider>
@@ -87,6 +126,16 @@ const Switch = ({
 };
 
 Switch.propTypes = {
+  /** Filtered styled system margin props */
+  ...marginPropTypes,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+  /** If true the Component will be focused when page load */
+  autoFocus: PropTypes.bool,
   /** Set the value of the Switch if component is meant to be used as controlled */
   checked: PropTypes.bool,
   /** Set the default value of the Switch if component is meant to be used as uncontrolled */
@@ -105,7 +154,7 @@ Switch.propTypes = {
   label: PropTypes.string,
   /** Sets label alignment - accepted values: 'left' (default), 'right' */
   labelAlign: PropTypes.oneOf(["left", "right"]),
-  /** Help text */
+  /** The content for the help tooltip, to appear next to the Label */
   labelHelp: PropTypes.node,
   /** Displays label inline with the Switch */
   labelInline: PropTypes.bool,
@@ -137,6 +186,10 @@ Switch.propTypes = {
   onChange: PropTypes.func,
   /** Accepts a callback function which is triggered on blur event */
   onBlur: PropTypes.func,
+  /** Accepts a callback function which is triggered on focus event */
+  onFocus: PropTypes.func,
+  /** Accepts a callback function which is triggered on click event */
+  onClick: PropTypes.func,
   /** Reverses label and Switch display */
   reverse: PropTypes.bool,
   /**
@@ -146,8 +199,6 @@ Switch.propTypes = {
   size: PropTypes.oneOf(["small", "large"]),
   /** the value of the checkbox, passed on form submit */
   value: PropTypes.string,
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 7]),
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint: PropTypes.number,
   /** Flag to configure component as mandatory */
@@ -160,6 +211,7 @@ Switch.defaultProps = {
   labelInline: false,
   reverse: true,
   validationOnLabel: false,
+  "data-component": "switch",
 };
 
 export { Switch as BaseSwitch };
diff --git a/src/components/switch/switch.d.ts b/src/components/switch/switch.d.ts
index 24358488a2..6c3200a883 100644
--- a/src/components/switch/switch.d.ts
+++ b/src/components/switch/switch.d.ts
@@ -2,30 +2,27 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 
-export type SwitchSize = "small" | "large";
 export type LabelAlign = "left" | "right";
 
 export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
   /** Set the default value of the Switch if component is meant to be used as uncontrolled */
   defaultChecked?: boolean;
   /** Overrides the default tabindex of the Help component */
   helpTabIndex?: number | string;
-  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
-  id?: string;
   /** Text alignment of the label */
   labelAlign?: LabelAlign;
-  /** A message that the Help component will display */
-  labelHelp?: React.ReactNode;
   /** When true label is inline */
   labelInline?: boolean;
   /** Triggers loading animation */
   loading?: boolean;
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
-  /** Size of the switch */
-  size?: SwitchSize;
   /** When true, validation icon will be placed on label instead of being placed on the input */
   validationOnLabel?: boolean;
   /** The value of the switch, passed on form submit */
diff --git a/src/components/switch/switch.spec.js b/src/components/switch/switch.spec.js
index 79f9ffd14f..a397d51d83 100644
--- a/src/components/switch/switch.spec.js
+++ b/src/components/switch/switch.spec.js
@@ -21,7 +21,6 @@ import StyledValidationIcon from "../../__internal__/validations/validation-icon
 import { baseTheme } from "../../style/themes";
 import SwitchSliderPanel from "./__internal__/switch-slider-panel.style";
 import SwitchStyle from "./switch.style";
-import SwitchSlider from "./__internal__/switch-slider.component";
 import Label from "../../__internal__/label";
 import I18nProvider from "../i18n-provider";
 import Tooltip from "../tooltip";
@@ -252,9 +251,6 @@ describe("Switch", () => {
             expect(wrapper.find(CheckableInput).props().labelInline).toEqual(
               true
             );
-            expect(wrapper.find(SwitchSlider).props().labelInline).toEqual(
-              true
-            );
           });
         });
 
@@ -279,9 +275,6 @@ describe("Switch", () => {
             expect(wrapper.find(CheckableInput).props().labelInline).toEqual(
               false
             );
-            expect(wrapper.find(SwitchSlider).props().labelInline).toEqual(
-              false
-            );
           });
         });
       });
diff --git a/src/components/switch/switch.stories.mdx b/src/components/switch/switch.stories.mdx
index c03c403442..70b53573e4 100644
--- a/src/components/switch/switch.stories.mdx
+++ b/src/components/switch/switch.stories.mdx
@@ -365,6 +365,8 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <StyledSystemProps of={Switch} noHeader margin />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ## Translation keys
 
 The following keys are available to override the translations for this component by passing in a custom locale object to the
diff --git a/src/components/textarea/textarea.component.js b/src/components/textarea/textarea.component.js
index 81113fb8c7..77aa89b991 100644
--- a/src/components/textarea/textarea.component.js
+++ b/src/components/textarea/textarea.component.js
@@ -20,14 +20,6 @@ const getFormatNumber = (value, locale) =>
 const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
 );
-
-// Spacing props filtering is a temporary solution until FormField and all related components are refactored
-// FIXME FE-3370
-const filterOutSpacingProps = (obj) =>
-  Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !styledSystemPropTypes.space[key])
-  );
-
 class Textarea extends React.Component {
   // Minimum height of the textarea
   minHeight = 0;
@@ -80,31 +72,6 @@ class Textarea extends React.Component {
     }
   };
 
-  renderValidation() {
-    const {
-      disabled,
-      readOnly,
-      inputIcon,
-      size,
-      error,
-      warning,
-      info,
-      validationOnLabel,
-    } = this.props;
-    return (
-      <InputIconToggle
-        disabled={disabled}
-        readOnly={readOnly}
-        inputIcon={inputIcon}
-        size={size}
-        error={error}
-        warning={warning}
-        info={info}
-        useValidationIcon={!validationOnLabel}
-      />
-    );
-  }
-
   get overLimit() {
     const value = this.props.value || "";
     return value.length > parseInt(this.props.characterLimit, 10);
@@ -129,6 +96,8 @@ class Textarea extends React.Component {
 
   render() {
     const {
+      autoFocus,
+      fieldHelp,
       label,
       size,
       children,
@@ -137,6 +106,14 @@ class Textarea extends React.Component {
       onChange,
       disabled,
       labelInline,
+      labelAlign,
+      labelHelp,
+      labelSpacing,
+      inputIcon,
+      error,
+      warning,
+      info,
+      name,
       readOnly,
       placeholder,
       rows,
@@ -146,6 +123,9 @@ class Textarea extends React.Component {
       inputWidth,
       labelWidth,
       tooltipPosition,
+      "data-component": dataComponent,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...props
     } = this.props;
 
@@ -154,30 +134,43 @@ class Textarea extends React.Component {
         <InputBehaviour>
           <StyledTextarea
             labelInline={labelInline}
+            data-component={dataComponent}
+            data-role={dataRole}
+            data-element={dataElement}
             {...filterStyledSystemMarginProps(props)}
           >
             <FormField
+              fieldHelp={fieldHelp}
+              error={error}
+              warning={warning}
+              info={info}
               label={label}
               disabled={disabled}
               id={this.id}
               labelInline={labelInline}
+              labelAlign={labelAlign}
               labelWidth={labelWidth}
+              labelHelp={labelHelp}
+              labelSpacing={labelSpacing}
               isRequired={props.required}
               useValidationIcon={validationOnLabel}
               adaptiveLabelBreakpoint={adaptiveLabelBreakpoint}
-              {...filterOutSpacingProps(props)}
             >
               <InputPresentation
-                type="text"
                 size={size}
                 disabled={disabled}
                 readOnly={readOnly}
                 inputWidth={
                   typeof inputWidth === "number" ? inputWidth : 100 - labelWidth
                 }
-                {...props}
+                error={error}
+                warning={warning}
+                info={info}
               >
                 <Input
+                  autoFocus={autoFocus}
+                  name={name}
+                  aria-invalid={!!error}
                   ref={this._input}
                   maxLength={
                     enforceCharacterLimit && characterLimit
@@ -196,7 +189,16 @@ class Textarea extends React.Component {
                   {...props}
                 />
                 {children}
-                {this.renderValidation()}
+                <InputIconToggle
+                  disabled={disabled}
+                  readOnly={readOnly}
+                  inputIcon={inputIcon}
+                  size={size}
+                  error={error}
+                  warning={warning}
+                  info={info}
+                  useValidationIcon={!validationOnLabel}
+                />
               </InputPresentation>
             </FormField>
             {this.characterCount}
@@ -211,6 +213,14 @@ Textarea.contextType = LocaleContext;
 
 Textarea.propTypes = {
   ...marginPropTypes,
+  /** Automatically focus the input on component mount */
+  autoFocus: PropTypes.bool,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /** id of the input */
   id: PropTypes.string,
   /** Character limit of the textarea */
@@ -225,10 +235,14 @@ Textarea.propTypes = {
   enforceCharacterLimit: PropTypes.bool,
   /** Allows the Textareas Height to change based on user input */
   expandable: PropTypes.bool,
+  /** Help content to be displayed under an input */
+  fieldHelp: PropTypes.node,
   /** The content of the label for the input */
   label: PropTypes.string,
   /** Text applied to label help tooltip */
   labelHelp: PropTypes.node,
+  /** Inline label alignment */
+  labelAlign: PropTypes.oneOf(["left", "right"]),
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
diff --git a/src/components/textarea/textarea.d.ts b/src/components/textarea/textarea.d.ts
index 1a0edf4ceb..90db9640fd 100644
--- a/src/components/textarea/textarea.d.ts
+++ b/src/components/textarea/textarea.d.ts
@@ -2,8 +2,20 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 
 import { ValidationPropTypes } from "../../__internal__/validations";
+import { CommonInputProps } from "../../__internal__/input";
 
-export interface TextareaProps extends ValidationPropTypes, MarginProps {
+export interface TextareaProps
+  extends ValidationPropTypes,
+    MarginProps,
+    Omit<CommonInputProps, "size"> {
+  /** Automatically focus the input on component mount */
+  autoFocus?: boolean;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
   /** Character limit of the textarea */
@@ -34,8 +46,6 @@ export interface TextareaProps extends ValidationPropTypes, MarginProps {
   labelSpacing?: 1 | 2;
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth?: number;
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
   /** Name of the input */
   name?: string;
   /** Callback fired when the user types in the Textarea */
diff --git a/src/components/textarea/textarea.stories.mdx b/src/components/textarea/textarea.stories.mdx
index 2145a50e82..254ff0a541 100644
--- a/src/components/textarea/textarea.stories.mdx
+++ b/src/components/textarea/textarea.stories.mdx
@@ -317,3 +317,5 @@ It is possible to use the `tooltipPosition` to override the default placement of
 ### Textarea
 
 <StyledSystemProps of={OriginalTextarea} noHeader margin />
+
+**Any other supplied props will be provided to the underlying HTML input element**
diff --git a/src/components/textbox/__snapshots__/textbox.spec.js.snap b/src/components/textbox/__snapshots__/textbox.spec.js.snap
index 4dd8809839..4bae33c2fe 100644
--- a/src/components/textbox/__snapshots__/textbox.spec.js.snap
+++ b/src/components/textbox/__snapshots__/textbox.spec.js.snap
@@ -6,29 +6,21 @@ exports[`Textbox renders with InputPresentation and Input and correct props pass
     <FormField
       id="mocked-guid"
       labelWidth={30}
-      name="mocked-guid"
-      size="medium"
       useValidationIcon={false}
     >
       <InputPresentation
-        id="mocked-guid"
         inputWidth={70}
-        name="mocked-guid"
         size="medium"
-        type="text"
       >
         southpaw children
         <ForwardRef
           aria-invalid={false}
           id="mocked-guid"
           name="mocked-guid"
-          size="medium"
           value="foobar"
         />
         normal children
         <InputIconToggle
-          id="mocked-guid"
-          name="mocked-guid"
           size="medium"
           useValidationIcon={true}
         />
diff --git a/src/components/textbox/textbox.component.js b/src/components/textbox/textbox.component.js
index 88e0c7b55a..1c437a98d1 100644
--- a/src/components/textbox/textbox.component.js
+++ b/src/components/textbox/textbox.component.js
@@ -2,10 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 
-import {
-  filterStyledSystemMarginProps,
-  filterStyledSystemPaddingProps,
-} from "../../style/utils";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import FormField from "../../__internal__/form-field";
@@ -19,23 +16,39 @@ const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
 );
 
-// Padding props filtering is a temporary solution until FormField and all related components are refactored
-// FIXME FE-3370
-const paddingPropTypes = filterStyledSystemPaddingProps(
-  styledSystemPropTypes.space
-);
-const filterOutPaddingProps = (obj) =>
-  Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !paddingPropTypes[key])
-  );
-
 const Textbox = ({
+  align,
+  autoFocus,
   children,
+  disabled,
   inputIcon,
   leftChildren,
+  labelId,
+  label,
+  labelAlign,
+  labelHelp,
+  labelInline,
+  labelSpacing,
+  id,
   formattedValue,
+  fieldHelp,
+  error,
+  warning,
+  info,
+  name,
+  reverse,
+  size,
   value,
-  childOfForm,
+  readOnly,
+  placeholder,
+  inputRef,
+  onBlur,
+  onClick,
+  onFocus,
+  onChange,
+  onMouseDown,
+  onChangeDeferred,
+  deferTimeout,
   isOptional,
   iconOnClick,
   iconOnMouseDown,
@@ -47,8 +60,10 @@ const Textbox = ({
   adaptiveLabelBreakpoint,
   required,
   positionedChildren,
-  inputRef,
   tooltipPosition,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
   enforceCharacterLimit = true,
   characterLimit,
   warnOverLimit = false,
@@ -65,17 +80,37 @@ const Textbox = ({
     <TooltipProvider tooltipPosition={tooltipPosition}>
       <InputBehaviour>
         <FormField
-          childOfForm={childOfForm}
+          disabled={disabled}
+          fieldHelp={fieldHelp}
+          error={error}
+          warning={warning}
+          info={info}
+          label={label}
+          labelId={labelId}
+          labelAlign={labelAlign}
+          labelHelp={labelHelp}
+          labelInline={labelInline}
+          labelSpacing={labelSpacing}
+          labelWidth={labelWidth}
+          id={id}
+          reverse={reverse}
           isOptional={isOptional}
-          {...filterOutPaddingProps(props)}
           useValidationIcon={validationOnLabel}
-          labelWidth={labelWidth}
           adaptiveLabelBreakpoint={adaptiveLabelBreakpoint}
           isRequired={required}
+          data-component={dataComponent}
+          data-role={dataRole}
+          data-element={dataElement}
+          {...filterStyledSystemMarginProps(props)}
         >
           <InputPresentation
-            type="text"
-            {...removeParentProps(props)}
+            align={align}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={size}
+            error={error}
+            warning={warning}
+            info={info}
             inputWidth={inputWidth || 100 - labelWidth}
             positionedChildren={positionedChildren}
           >
@@ -87,23 +122,40 @@ const Textbox = ({
             ) : null}
             <Input
               {...(required && { required })}
-              {...removeParentProps(props)}
-              placeholder={
-                props.disabled || props.readOnly ? "" : props.placeholder
-              }
-              aria-invalid={!!props.error}
+              align={align}
+              aria-invalid={!!error}
+              autoFocus={autoFocus}
+              deferTimeout={deferTimeout}
+              disabled={disabled}
+              id={id}
               inputRef={inputRef}
+              name={name}
+              onBlur={onBlur}
+              onChange={onChange}
+              onChangeDeferred={onChangeDeferred}
+              onClick={onClick}
+              onFocus={onFocus}
+              onMouseDown={onMouseDown}
+              placeholder={disabled || readOnly ? "" : placeholder}
+              readOnly={readOnly}
               value={visibleValue(value, formattedValue)}
               maxLength={maxLength}
+              {...props}
             />
             {children}
             <InputIconToggle
-              {...removeParentProps(props)}
-              useValidationIcon={!validationOnLabel}
-              onClick={iconOnClick || props.onClick}
-              onMouseDown={iconOnMouseDown}
-              inputIcon={inputIcon}
+              align={align}
+              disabled={disabled}
+              error={error}
               iconTabIndex={iconTabIndex}
+              info={info}
+              inputIcon={inputIcon}
+              onClick={iconOnClick || onClick}
+              onMouseDown={iconOnMouseDown || onMouseDown}
+              readOnly={readOnly}
+              size={size}
+              useValidationIcon={!validationOnLabel}
+              warning={warning}
             />
           </InputPresentation>
         </FormField>
@@ -113,14 +165,6 @@ const Textbox = ({
   );
 };
 
-function removeParentProps(props) {
-  delete props["data-element"];
-  delete props["data-component"];
-  delete props["data-role"];
-  delete props.className;
-  return props;
-}
-
 function visibleValue(value, formattedValue) {
   return typeof formattedValue === "string" ? formattedValue : value;
 }
@@ -128,6 +172,16 @@ function visibleValue(value, formattedValue) {
 Textbox.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
+  /** Automatically focus the input on component mount */
+  autoFocus: PropTypes.bool,
+  /* The default value alignment on the input */
+  align: PropTypes.oneOf(["right", "left"]),
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
   /**
    * An optional alternative for props.value, this is useful if the
    * real value is an ID but you want to show a human-readable version.
@@ -147,12 +201,18 @@ Textbox.propTypes = {
   readOnly: PropTypes.bool,
   /** Event handler for the change event */
   onChange: PropTypes.func,
-  /** Event handler for the keyDown event */
-  onKeyDown: PropTypes.func,
+  /** Event handler for the focus event */
+  onFocus: PropTypes.func,
+  /** Event handler for the blur event */
+  onBlur: PropTypes.func,
+  /** Event handler for the mouse down event */
+  onMouseDown: PropTypes.func,
   /** Defered callback called after the onChange event */
   onChangeDeferred: PropTypes.func,
   /** Integer to determine timeout for defered callback */
   deferTimeout: PropTypes.number,
+  /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
+  id: PropTypes.string,
   /** Label */
   label: PropTypes.string,
   /** Inline label alignment */
@@ -167,6 +227,8 @@ Textbox.propTypes = {
   labelWidth: PropTypes.number,
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: PropTypes.number,
+  /** Input name */
+  name: PropTypes.string,
   /** Help content to be displayed under an input */
   fieldHelp: PropTypes.node,
   /** Type of the icon that will be rendered next to the input */
@@ -179,8 +241,6 @@ Textbox.propTypes = {
   inputIcon: PropTypes.string,
   /** Additional child elements to display before the input */
   leftChildren: PropTypes.node,
-  /** Flag to configure component when in a Form */
-  childOfForm: PropTypes.bool,
   /** [Legacy] Flag to configure component as optional in Form */
   isOptional: PropTypes.bool,
   /** Indicate that error has occurred
@@ -208,6 +268,13 @@ Textbox.propTypes = {
    *
    */
   positionedChildren: PropTypes.node,
+  /**
+   * Label id passed from Select component
+   * @private
+   * @ignore
+   *
+   */
+  labelId: PropTypes.string,
   /** Optional handler for click event on Textbox icon */
   iconOnClick: PropTypes.func,
   /** Optional handler for mousedown event on Textbox icon */
@@ -218,6 +285,8 @@ Textbox.propTypes = {
   onClick: PropTypes.func,
   /** Emphasized part of the displayed text */
   prefix: PropTypes.string,
+  /** Reverses label and input display */
+  reverse: PropTypes.bool,
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint: PropTypes.number,
   /** Flag to configure component as required */
diff --git a/src/components/textbox/textbox.d.ts b/src/components/textbox/textbox.d.ts
index 41dc30e9d2..739785356f 100644
--- a/src/components/textbox/textbox.d.ts
+++ b/src/components/textbox/textbox.d.ts
@@ -1,13 +1,25 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { MarginProps } from "styled-system";
 
 import { ValidationPropTypes } from "../../__internal__/validations";
+import { CommonInputProps } from "../../__internal__/input";
 
-export interface CommonTextboxProps extends ValidationPropTypes {
+export interface CommonTextboxProps
+  extends ValidationPropTypes,
+    MarginProps,
+    Omit<CommonInputProps, "size"> {
+  /** Automatically focus the input on component mount */
+  autoFocus?: boolean;
+  /* The default value alignment on the input */
+  align?: "right" | "left";
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
-  /** Flag to indicate that component is used in a Form */
-  childOfForm?: boolean;
   /** Integer to determine a timeout for the defered callback */
   deferTimeout?: number;
   /** If true, the component will be disabled */
@@ -19,6 +31,8 @@ export interface CommonTextboxProps extends ValidationPropTypes {
    * real value is an ID but you want to show a human-readable version.
    */
   formattedValue?: string;
+  /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
+  id?: string;
   /** Type of the icon that will be rendered next to the input */
   inputIcon?: string;
   /** Optional handler for click event on Textbox icon */
@@ -47,12 +61,20 @@ export interface CommonTextboxProps extends ValidationPropTypes {
   onChangeDeferred?: () => void;
   /** Specify a callback triggered on click */
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Specify a callback triggered on keuyDown */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Event handler for the focus event */
+  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Event handler for the blur event */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Event handler for the mouse down event */
+  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Input name */
+  name?: string;
   /** Placeholder string to be displayed in input */
   placeholder?: string;
   /** Emphasized part of the displayed text */
   prefix?: string;
+  /** Reverses label and input display */
+  reverse?: boolean;
   /** The unformatted value  */
   rawValue?: string;
   /** If true, the component will be read-only */
@@ -71,15 +93,15 @@ export interface CommonTextboxProps extends ValidationPropTypes {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-export interface TextboxProps extends CommonTextboxProps, SpaceProps {
+export interface TextboxProps extends CommonTextboxProps {
   /** Content to be rendered next to the input */
   children?: React.ReactNode;
   /** [Legacy] Flag to configure component as optional in Form */
   isOptional?: boolean;
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
   /** Container for DatePicker or SelectList components */
   positionedChildren?: React.ReactNode;
+  /** Label id passed from Select component */
+  labelId?: string;
   /** Character limit of the textarea */
   characterLimit?: string;
   /** Stop the user typing over the characterLimit */
diff --git a/src/components/textbox/textbox.stories.mdx b/src/components/textbox/textbox.stories.mdx
index 4752b1c61c..40dccbb580 100644
--- a/src/components/textbox/textbox.stories.mdx
+++ b/src/components/textbox/textbox.stories.mdx
@@ -342,6 +342,8 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <StyledSystemProps of={OriginalTextbox} noHeader margin />
 
+**Any other supplied props will be provided to the underlying HTML input element**
+
 ## Translation keys
 
 The following keys are available to override the translations for this component by passing in a custom locale object to the
diff --git a/src/style/utils/filter-out-styled-system-spacing-props.js b/src/style/utils/filter-out-styled-system-spacing-props.js
new file mode 100644
index 0000000000..a43676411b
--- /dev/null
+++ b/src/style/utils/filter-out-styled-system-spacing-props.js
@@ -0,0 +1,8 @@
+import styledSystemPropTypes from "@styled-system/prop-types";
+
+const filterOutStyledSystemSpacingProps = (obj) =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !styledSystemPropTypes.space[key])
+  );
+
+export default filterOutStyledSystemSpacingProps;
diff --git a/src/style/utils/index.js b/src/style/utils/index.js
index e96a0c3875..df20ff2f20 100644
--- a/src/style/utils/index.js
+++ b/src/style/utils/index.js
@@ -1,4 +1,9 @@
 import filterStyledSystemPaddingProps from "./filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "./filter-styled-system-margin-props";
+import filterOutStyledSystemSpacingProps from "./filter-out-styled-system-spacing-props";
 
-export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps };
+export {
+  filterStyledSystemPaddingProps,
+  filterStyledSystemMarginProps,
+  filterOutStyledSystemSpacingProps,
+};