diff --git a/src/components/Inputs/Input.types.ts b/src/components/Inputs/Input.types.ts
index 970eeebbd..493748bb8 100644
--- a/src/components/Inputs/Input.types.ts
+++ b/src/components/Inputs/Input.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { Placement, Strategy } from '@floating-ui/react-dom';
 import { IconName, IconProps } from '../Icon';
 import { LabelProps } from '../Label';
@@ -146,6 +146,10 @@ export interface TextAreaProps
      * @default false
      */
     enableExpand?: boolean;
+    /**
+     * The text area component ref.
+     */
+    ref?: Ref<HTMLTextAreaElement>;
     /**
      * The text area required attribute.
      * @default false
@@ -164,6 +168,12 @@ export interface TextAreaProps
 }
 
 export interface TextInputProps extends InputProps<HTMLInputElement> {
+    /**
+     * option to show the clear input button.
+     * default is true for backward compatibility
+     * @default true
+     */
+    clearable?: boolean;
     /**
      * The input html type.
      * @default 'text'
@@ -175,22 +185,18 @@ export interface TextInputProps extends InputProps<HTMLInputElement> {
      */
     numbersOnly?: boolean;
     /**
-     * The input required attribute.
-     * @default false
+     * onclear event handler.
      */
-    required?: boolean;
-
+    onClear?: React.MouseEventHandler<Element>;
     /**
-     * option to show the clear input button.
-     * default is true for backward compatibility
-     * @default true
+     * The input component ref.
      */
-    clearable?: boolean;
-
+    ref?: Ref<HTMLInputElement>;
     /**
-     * onclear event handler.
+     * The input required attribute.
+     * @default false
      */
-    onClear?: React.MouseEventHandler<Element>;
+    required?: boolean;
 }
 
 export interface InputProps<T>
diff --git a/src/components/Inputs/SearchBox/SearchBox.tsx b/src/components/Inputs/SearchBox/SearchBox.tsx
index 793092181..248b19e59 100644
--- a/src/components/Inputs/SearchBox/SearchBox.tsx
+++ b/src/components/Inputs/SearchBox/SearchBox.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { IconName } from '../../Icon';
 import {
     TextInputWidth,
@@ -8,63 +8,71 @@ import {
     TextInputTheme,
 } from '../index';
 
-export const SearchBox: FC<SearchBoxProps> = ({
-    allowDisabledFocus = false,
-    ariaLabel,
-    autoFocus = false,
-    classNames,
-    clearButtonAriaLabel,
-    disabled = false,
-    iconProps,
-    iconButtonProps = {
-        allowDisabledFocus: false,
-        disabled: false,
-        iconProps: { path: IconName.mdiMagnify },
-    },
-    inputWidth = TextInputWidth.fitContent,
-    labelProps,
-    maxlength,
-    minlength,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    onKeyDown,
-    placeholder = 'Search',
-    shape = TextInputShape.Rectangle,
-    style,
-    theme = TextInputTheme.light,
-    value,
-    waitInterval = 500,
-    ...rest
-}) => (
-    <form role="search">
-        <TextInput
-            {...rest}
-            allowDisabledFocus={allowDisabledFocus}
-            ariaLabel={ariaLabel}
-            autoFocus={autoFocus}
-            classNames={classNames}
-            clearButtonAriaLabel={clearButtonAriaLabel}
-            disabled={disabled}
-            htmlType="search"
-            iconProps={iconProps}
-            iconButtonProps={iconButtonProps}
-            inputWidth={inputWidth}
-            labelProps={labelProps}
-            maxlength={maxlength}
-            minlength={minlength}
-            name={name}
-            onBlur={onBlur}
-            onChange={onChange}
-            onFocus={onFocus}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            shape={shape}
-            style={style}
-            theme={theme}
-            value={value}
-            waitInterval={waitInterval}
-        />
-    </form>
+export const SearchBox: FC<SearchBoxProps> = React.forwardRef(
+    (
+        {
+            allowDisabledFocus = false,
+            ariaLabel,
+            autoFocus = false,
+            classNames,
+            clearButtonAriaLabel,
+            disabled = false,
+            iconProps,
+            iconButtonProps = {
+                allowDisabledFocus: false,
+                disabled: false,
+                iconProps: { path: IconName.mdiMagnify },
+            },
+            inputWidth = TextInputWidth.fitContent,
+            labelProps,
+            maxlength,
+            minlength,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            onKeyDown,
+            placeholder = 'Search',
+            shape = TextInputShape.Rectangle,
+            style,
+            theme = TextInputTheme.light,
+            value,
+            waitInterval = 500,
+            ...rest
+        },
+        ref: Ref<HTMLInputElement>
+    ) => {
+        return (
+            <form role="search">
+                <TextInput
+                    {...rest}
+                    ref={ref}
+                    allowDisabledFocus={allowDisabledFocus}
+                    ariaLabel={ariaLabel}
+                    autoFocus={autoFocus}
+                    classNames={classNames}
+                    clearButtonAriaLabel={clearButtonAriaLabel}
+                    disabled={disabled}
+                    htmlType="search"
+                    iconProps={iconProps}
+                    iconButtonProps={iconButtonProps}
+                    inputWidth={inputWidth}
+                    labelProps={labelProps}
+                    maxlength={maxlength}
+                    minlength={minlength}
+                    name={name}
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    onKeyDown={onKeyDown}
+                    placeholder={placeholder}
+                    shape={shape}
+                    style={style}
+                    theme={theme}
+                    value={value}
+                    waitInterval={waitInterval}
+                />
+            </form>
+        );
+    }
 );
diff --git a/src/components/Inputs/TextArea/TextArea.tsx b/src/components/Inputs/TextArea/TextArea.tsx
index 1db7526da..afd87afa3 100644
--- a/src/components/Inputs/TextArea/TextArea.tsx
+++ b/src/components/Inputs/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, Ref, useState } from 'react';
 import { Icon, IconName } from '../../Icon';
 import { Label } from '../../Label';
 import { TextInputWidth, TextAreaProps, TextInputTheme } from '../index';
@@ -7,94 +7,105 @@ import { mergeClasses, uniqueId } from '../../../shared/utilities';
 
 import styles from '../input.module.scss';
 
-export const TextArea: FC<TextAreaProps> = ({
-    allowDisabledFocus = false,
-    ariaLabel,
-    autoFocus = false,
-    classNames,
-    disabled = false,
-    enableExpand = false,
-    id,
-    inputWidth = TextInputWidth.fitContent,
-    labelProps,
-    maxlength,
-    minlength,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    onKeyDown,
-    placeholder,
-    required = false,
-    style,
-    textAreaCols = 50,
-    textAreaRows = 5,
-    theme = TextInputTheme.light,
-    value,
-    waitInterval = 10,
-    ...rest
-}) => {
-    const [textAreaId] = useState<string>(uniqueId(id || 'textarea-'));
-
-    const textAreaClassNames: string = mergeClasses([
-        classNames,
-        styles.textArea,
-        { [styles.textAreaNoExpand]: !enableExpand },
-        { [styles.dark]: theme === TextInputTheme.dark },
-        { [styles.inputStretch]: inputWidth === TextInputWidth.fill },
-    ]);
-
-    const textAreaWrapperClassNames: string = mergeClasses([
-        styles.inputWrapper,
+export const TextArea: FC<TextAreaProps> = React.forwardRef(
+    (
         {
-            [styles.inputStretch]: inputWidth === TextInputWidth.fill,
+            allowDisabledFocus = false,
+            ariaLabel,
+            autoFocus = false,
+            classNames,
+            disabled = false,
+            enableExpand = false,
+            id,
+            inputWidth = TextInputWidth.fitContent,
+            labelProps,
+            maxlength,
+            minlength,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            onKeyDown,
+            placeholder,
+            required = false,
+            style,
+            textAreaCols = 50,
+            textAreaRows = 5,
+            theme = TextInputTheme.light,
+            value,
+            waitInterval = 10,
+            ...rest
         },
-    ]);
+        ref: Ref<HTMLTextAreaElement>
+    ) => {
+        const [textAreaId] = useState<string>(uniqueId(id || 'textarea-'));
 
-    const handleChange = useDebounce<React.ChangeEvent<HTMLTextAreaElement>>(
-        (_event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
-            triggerChange(_event),
-        waitInterval
-    );
+        const textAreaClassNames: string = mergeClasses([
+            classNames,
+            styles.textArea,
+            { [styles.textAreaNoExpand]: !enableExpand },
+            { [styles.dark]: theme === TextInputTheme.dark },
+            { [styles.inputStretch]: inputWidth === TextInputWidth.fill },
+        ]);
 
-    const triggerChange = (
-        _event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-    ) => {
-        onChange && onChange(_event);
-    };
+        const textAreaWrapperClassNames: string = mergeClasses([
+            styles.inputWrapper,
+            {
+                [styles.inputStretch]: inputWidth === TextInputWidth.fill,
+            },
+        ]);
+
+        const handleChange = useDebounce<
+            React.ChangeEvent<HTMLTextAreaElement>
+        >(
+            (
+                _event?: React.ChangeEvent<
+                    HTMLTextAreaElement | HTMLInputElement
+                >
+            ) => triggerChange(_event),
+            waitInterval
+        );
+
+        const triggerChange = (
+            _event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+        ) => {
+            onChange && onChange(_event);
+        };
 
-    return (
-        <div className={textAreaWrapperClassNames}>
-            {labelProps && <Label {...labelProps} />}
-            <textarea
-                {...rest}
-                aria-disabled={allowDisabledFocus}
-                aria-label={ariaLabel}
-                autoFocus={autoFocus}
-                className={textAreaClassNames}
-                cols={textAreaCols}
-                disabled={disabled}
-                id={textAreaId}
-                maxLength={maxlength}
-                minLength={minlength}
-                name={name}
-                onChange={!allowDisabledFocus ? handleChange : null}
-                onBlur={!allowDisabledFocus ? onBlur : null}
-                onFocus={!allowDisabledFocus ? onFocus : null}
-                onKeyDown={!allowDisabledFocus ? onKeyDown : null}
-                placeholder={placeholder}
-                required={required}
-                style={style}
-                rows={textAreaRows}
-                tabIndex={0}
-                value={value}
-            />
-            {enableExpand && (
-                <Icon
-                    classNames={styles.textAreaResizeIcon}
-                    path={IconName.mdiResizeBottomRight}
+        return (
+            <div className={textAreaWrapperClassNames}>
+                {labelProps && <Label {...labelProps} />}
+                <textarea
+                    {...rest}
+                    ref={ref}
+                    aria-disabled={allowDisabledFocus}
+                    aria-label={ariaLabel}
+                    autoFocus={autoFocus}
+                    className={textAreaClassNames}
+                    cols={textAreaCols}
+                    disabled={disabled}
+                    id={textAreaId}
+                    maxLength={maxlength}
+                    minLength={minlength}
+                    name={name}
+                    onChange={!allowDisabledFocus ? handleChange : null}
+                    onBlur={!allowDisabledFocus ? onBlur : null}
+                    onFocus={!allowDisabledFocus ? onFocus : null}
+                    onKeyDown={!allowDisabledFocus ? onKeyDown : null}
+                    placeholder={placeholder}
+                    required={required}
+                    style={style}
+                    rows={textAreaRows}
+                    tabIndex={0}
+                    value={value}
                 />
-            )}
-        </div>
-    );
-};
+                {enableExpand && (
+                    <Icon
+                        classNames={styles.textAreaResizeIcon}
+                        path={IconName.mdiResizeBottomRight}
+                    />
+                )}
+            </div>
+        );
+    }
+);
diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx
index 8243a1a3e..85be68fd0 100644
--- a/src/components/Inputs/TextInput/TextInput.tsx
+++ b/src/components/Inputs/TextInput/TextInput.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, Ref, useEffect, useState } from 'react';
 import { ButtonSize, DefaultButton } from '../../Button';
 import { Icon, IconName, IconSize } from '../../Icon';
 import { Label } from '../../Label';
@@ -13,224 +13,235 @@ import { mergeClasses, uniqueId } from '../../../shared/utilities';
 
 import styles from '../input.module.scss';
 
-export const TextInput: FC<TextInputProps> = ({
-    allowDisabledFocus = false,
-    ariaLabel,
-    autoFocus = false,
-    classNames,
-    clearButtonAriaLabel,
-    disabled = false,
-    htmlType = 'text',
-    iconProps,
-    iconButtonProps,
-    id,
-    inputWidth = TextInputWidth.fitContent,
-    labelProps,
-    maxlength,
-    minlength,
-    name,
-    numbersOnly = false,
-    onBlur,
-    onChange,
-    onClear,
-    onFocus,
-    onKeyDown,
-    placeholder,
-    required = false,
-    readonly = false,
-    shape = TextInputShape.Rectangle,
-    style,
-    theme = TextInputTheme.light,
-    value,
-    waitInterval = 10,
-    clearable = true,
-    ...rest
-}) => {
-    const [clearButtonShown, _setClearButtonShown] = useState<boolean>(false);
-    const [inputId] = useState<string>(uniqueId(id || 'input-'));
-    const inputField: HTMLElement = document.getElementById(inputId);
-
-    const iconClassNames: string = mergeClasses([
-        styles.iconWrapper,
-        styles.leftIcon,
-    ]);
-
-    const iconButtonClassNames: string = mergeClasses([
-        styles.iconButton,
-        styles.leftIcon,
-    ]);
-
-    const textInputClassNames: string = mergeClasses([
-        classNames,
-        {
-            [styles.withIcon]:
-                !!iconProps?.path && shape === TextInputShape.Rectangle,
-        },
-        {
-            [styles.withImageIcon]:
-                !!iconProps?.imageSrc && shape === TextInputShape.Rectangle,
-        },
-        {
-            [styles.withIconButton]:
-                !!iconButtonProps && shape === TextInputShape.Rectangle,
-        },
-        {
-            [styles.withIconAndIconButton]:
-                !!iconProps &&
-                !!iconButtonProps &&
-                shape === TextInputShape.Rectangle,
-        },
-        { [styles.pillShape]: shape === TextInputShape.Pill },
-        {
-            [styles.pillShapeWithIcon]:
-                !!iconProps?.path && shape === TextInputShape.Pill,
-        },
-        {
-            [styles.pillShapeWithImageIcon]:
-                !!iconProps?.imageSrc && shape === TextInputShape.Pill,
-        },
+export const TextInput: FC<TextInputProps> = React.forwardRef(
+    (
         {
-            [styles.pillShapeWithIconButton]:
-                !!iconButtonProps && shape === TextInputShape.Pill,
+            allowDisabledFocus = false,
+            ariaLabel,
+            autoFocus = false,
+            classNames,
+            clearButtonAriaLabel,
+            disabled = false,
+            htmlType = 'text',
+            iconProps,
+            iconButtonProps,
+            id,
+            inputWidth = TextInputWidth.fitContent,
+            labelProps,
+            maxlength,
+            minlength,
+            name,
+            numbersOnly = false,
+            onBlur,
+            onChange,
+            onClear,
+            onFocus,
+            onKeyDown,
+            placeholder,
+            required = false,
+            readonly = false,
+            shape = TextInputShape.Rectangle,
+            style,
+            theme = TextInputTheme.light,
+            value,
+            waitInterval = 10,
+            clearable = true,
+            ...rest
         },
-        {
-            [styles.pillShapeWithIconAndIconButton]:
-                !!iconProps &&
-                !!iconButtonProps &&
-                shape === TextInputShape.Pill,
-        },
-        {
-            [styles.dark]: theme === TextInputTheme.dark,
-        },
-        {
-            [styles.inputStretch]: inputWidth === TextInputWidth.fill,
-        },
-    ]);
+        ref: Ref<HTMLInputElement>
+    ) => {
+        const [clearButtonShown, _setClearButtonShown] =
+            useState<boolean>(false);
+        const [inputId] = useState<string>(uniqueId(id || 'input-'));
+        const inputField: HTMLElement = document.getElementById(inputId);
 
-    const textInputWrapperClassNames: string = mergeClasses([
-        styles.inputWrapper,
-        {
-            [styles.inputStretch]: inputWidth === TextInputWidth.fill,
-        },
-    ]);
+        const iconClassNames: string = mergeClasses([
+            styles.iconWrapper,
+            styles.leftIcon,
+        ]);
 
-    useEffect(() => {
-        if (value?.toString()?.length > 0) {
-            return setClearButtonShown(true);
-        }
-        setClearButtonShown(false);
-    }, [value]);
+        const iconButtonClassNames: string = mergeClasses([
+            styles.iconButton,
+            styles.leftIcon,
+        ]);
 
-    const setClearButtonShown = (showClear: boolean) => {
-        return !clearable
-            ? _setClearButtonShown(false)
-            : _setClearButtonShown(showClear);
-    };
+        const textInputClassNames: string = mergeClasses([
+            classNames,
+            {
+                [styles.withIcon]:
+                    !!iconProps?.path && shape === TextInputShape.Rectangle,
+            },
+            {
+                [styles.withImageIcon]:
+                    !!iconProps?.imageSrc && shape === TextInputShape.Rectangle,
+            },
+            {
+                [styles.withIconButton]:
+                    !!iconButtonProps && shape === TextInputShape.Rectangle,
+            },
+            {
+                [styles.withIconAndIconButton]:
+                    !!iconProps &&
+                    !!iconButtonProps &&
+                    shape === TextInputShape.Rectangle,
+            },
+            { [styles.pillShape]: shape === TextInputShape.Pill },
+            {
+                [styles.pillShapeWithIcon]:
+                    !!iconProps?.path && shape === TextInputShape.Pill,
+            },
+            {
+                [styles.pillShapeWithImageIcon]:
+                    !!iconProps?.imageSrc && shape === TextInputShape.Pill,
+            },
+            {
+                [styles.pillShapeWithIconButton]:
+                    !!iconButtonProps && shape === TextInputShape.Pill,
+            },
+            {
+                [styles.pillShapeWithIconAndIconButton]:
+                    !!iconProps &&
+                    !!iconButtonProps &&
+                    shape === TextInputShape.Pill,
+            },
+            {
+                [styles.dark]: theme === TextInputTheme.dark,
+            },
+            {
+                [styles.inputStretch]: inputWidth === TextInputWidth.fill,
+            },
+        ]);
 
-    const handleOnClear = (_event: React.MouseEvent) => {
-        _event.preventDefault();
-        _event.stopPropagation();
-        if (!!inputField) {
-            (inputField as HTMLInputElement).value = '';
-        }
-        onClear?.(_event);
-        setClearButtonShown(false);
-    };
+        const textInputWrapperClassNames: string = mergeClasses([
+            styles.inputWrapper,
+            {
+                [styles.inputStretch]: inputWidth === TextInputWidth.fill,
+            },
+        ]);
 
-    const debouncedChange = useDebounce<React.ChangeEvent<HTMLInputElement>>(
-        (
-            _event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-        ) => {
-            const { target } = _event;
+        useEffect(() => {
+            if (value?.toString()?.length > 0) {
+                return setClearButtonShown(true);
+            }
+            setClearButtonShown(false);
+        }, [value]);
 
-            onChange?.(_event);
+        const setClearButtonShown = (showClear: boolean) => {
+            return !clearable
+                ? _setClearButtonShown(false)
+                : _setClearButtonShown(showClear);
+        };
 
-            if (target?.value.length === 0 && clearButtonShown) {
-                setClearButtonShown(false);
-            } else if (!clearButtonShown) {
-                setClearButtonShown(true);
+        const handleOnClear = (_event: React.MouseEvent) => {
+            _event.preventDefault();
+            _event.stopPropagation();
+            if (!!inputField) {
+                (inputField as HTMLInputElement).value = '';
             }
-        },
-        waitInterval
-    );
+            onClear?.(_event);
+            setClearButtonShown(false);
+        };
 
-    // We need to persist the syntheticevent object, as useDebounce uses a timeout function internally
-    // Reference: https://reactjs.org/docs/legacy-event-pooling.html
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        e.persist();
-        debouncedChange(e);
-    };
+        const debouncedChange = useDebounce<
+            React.ChangeEvent<HTMLInputElement>
+        >(
+            (
+                _event?: React.ChangeEvent<
+                    HTMLTextAreaElement | HTMLInputElement
+                >
+            ) => {
+                const { target } = _event;
 
-    return (
-        <div className={textInputWrapperClassNames}>
-            {labelProps && <Label {...labelProps} />}
-            <input
-                {...rest}
-                aria-label={ariaLabel}
-                autoFocus={autoFocus}
-                className={textInputClassNames}
-                disabled={disabled}
-                id={inputId}
-                maxLength={maxlength}
-                minLength={minlength}
-                name={name}
-                onChange={!allowDisabledFocus ? handleChange : null}
-                onBlur={!allowDisabledFocus ? onBlur : null}
-                onFocus={!allowDisabledFocus ? onFocus : null}
-                onKeyDown={!allowDisabledFocus ? onKeyDown : null}
-                placeholder={placeholder}
-                required={required}
-                role="textbox"
-                style={style}
-                tabIndex={0}
-                type={numbersOnly ? 'number' : htmlType}
-                value={value}
-                readOnly={readonly}
-            />
-            {iconProps && (
-                <div className={iconClassNames}>
-                    {iconProps.path && !iconProps.imageSrc && (
-                        <Icon
-                            {...iconProps}
-                            path={iconProps.path}
-                            size={IconSize.Medium}
-                        />
-                    )}
-                    {iconProps.imageSrc && !iconProps.path && (
-                        <img
-                            aria-hidden={iconProps.ariaHidden}
-                            alt={iconProps.alt}
-                            id={iconProps.id}
-                            src={iconProps.imageSrc}
-                        />
-                    )}
-                </div>
-            )}
-            {iconButtonProps && (
-                <DefaultButton
-                    allowDisabledFocus={iconButtonProps.allowDisabledFocus}
-                    ariaLabel={iconButtonProps.ariaLabel}
-                    checked={iconButtonProps.checked}
-                    classNames={iconButtonClassNames}
-                    disabled={iconButtonProps.disabled}
-                    iconProps={{ path: iconButtonProps.iconProps.path }}
-                    id={iconButtonProps.id}
-                    onClick={iconButtonProps.onClick}
-                    size={ButtonSize.Medium}
-                    htmlType={iconButtonProps.htmlType}
-                />
-            )}
-            {clearButtonShown && !numbersOnly && htmlType !== 'number' && (
-                <DefaultButton
-                    allowDisabledFocus={allowDisabledFocus}
-                    ariaLabel={clearButtonAriaLabel}
-                    classNames={styles.clearIconButton}
+                onChange?.(_event);
+
+                if (target?.value.length === 0 && clearButtonShown) {
+                    setClearButtonShown(false);
+                } else if (!clearButtonShown) {
+                    setClearButtonShown(true);
+                }
+            },
+            waitInterval
+        );
+
+        // We need to persist the syntheticevent object, as useDebounce uses a timeout function internally
+        // Reference: https://reactjs.org/docs/legacy-event-pooling.html
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            e.persist();
+            debouncedChange(e);
+        };
+
+        return (
+            <div className={textInputWrapperClassNames}>
+                {labelProps && <Label {...labelProps} />}
+                <input
+                    {...rest}
+                    ref={ref}
+                    aria-label={ariaLabel}
+                    autoFocus={autoFocus}
+                    className={textInputClassNames}
                     disabled={disabled}
-                    iconProps={{ path: IconName.mdiClose }}
-                    onClick={!allowDisabledFocus ? handleOnClear : null}
-                    size={ButtonSize.Small}
+                    id={inputId}
+                    maxLength={maxlength}
+                    minLength={minlength}
+                    name={name}
+                    onChange={!allowDisabledFocus ? handleChange : null}
+                    onBlur={!allowDisabledFocus ? onBlur : null}
+                    onFocus={!allowDisabledFocus ? onFocus : null}
+                    onKeyDown={!allowDisabledFocus ? onKeyDown : null}
+                    placeholder={placeholder}
+                    required={required}
+                    role="textbox"
+                    style={style}
+                    tabIndex={0}
+                    type={numbersOnly ? 'number' : htmlType}
+                    value={value}
+                    readOnly={readonly}
                 />
-            )}
-        </div>
-    );
-};
+                {iconProps && (
+                    <div className={iconClassNames}>
+                        {iconProps.path && !iconProps.imageSrc && (
+                            <Icon
+                                {...iconProps}
+                                path={iconProps.path}
+                                size={IconSize.Medium}
+                            />
+                        )}
+                        {iconProps.imageSrc && !iconProps.path && (
+                            <img
+                                aria-hidden={iconProps.ariaHidden}
+                                alt={iconProps.alt}
+                                id={iconProps.id}
+                                src={iconProps.imageSrc}
+                            />
+                        )}
+                    </div>
+                )}
+                {iconButtonProps && (
+                    <DefaultButton
+                        allowDisabledFocus={iconButtonProps.allowDisabledFocus}
+                        ariaLabel={iconButtonProps.ariaLabel}
+                        checked={iconButtonProps.checked}
+                        classNames={iconButtonClassNames}
+                        disabled={iconButtonProps.disabled}
+                        iconProps={{ path: iconButtonProps.iconProps.path }}
+                        id={iconButtonProps.id}
+                        onClick={iconButtonProps.onClick}
+                        size={ButtonSize.Medium}
+                        htmlType={iconButtonProps.htmlType}
+                    />
+                )}
+                {clearButtonShown && !numbersOnly && htmlType !== 'number' && (
+                    <DefaultButton
+                        allowDisabledFocus={allowDisabledFocus}
+                        ariaLabel={clearButtonAriaLabel}
+                        classNames={styles.clearIconButton}
+                        disabled={disabled}
+                        iconProps={{ path: IconName.mdiClose }}
+                        onClick={!allowDisabledFocus ? handleOnClear : null}
+                        size={ButtonSize.Small}
+                    />
+                )}
+            </div>
+        );
+    }
+);