diff --git a/packages/volto/news/6020.feature b/packages/volto/news/6020.feature
new file mode 100644
index 0000000000..c5a57a68f3
--- /dev/null
+++ b/packages/volto/news/6020.feature
@@ -0,0 +1 @@
+Refactor TextWidget. @Tishasoumya-02
\ No newline at end of file
diff --git a/packages/volto/src/components/manage/Widgets/TextWidget.jsx b/packages/volto/src/components/manage/Widgets/TextWidget.jsx
index fe53ed89b1..37f4c0c957 100644
--- a/packages/volto/src/components/manage/Widgets/TextWidget.jsx
+++ b/packages/volto/src/components/manage/Widgets/TextWidget.jsx
@@ -1,136 +1,104 @@
-/**
- * TextWidget component.
- * @module components/manage/Widgets/TextWidget
- */
-
-import React, { Component } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
 
-import { injectIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
-/**
- * The simple text widget.
- *
- * It is the default fallback widget, so if no other widget is found based on
- * passed field properties, it will be used.
- */
-class TextWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    value: PropTypes.string,
-    focus: PropTypes.bool,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onEdit: PropTypes.func,
-    onDelete: PropTypes.func,
-    icon: PropTypes.shape({
-      xmlns: PropTypes.string,
-      viewBox: PropTypes.string,
-      content: PropTypes.string,
-    }),
-    iconAction: PropTypes.func,
-    minLength: PropTypes.number,
-    maxLength: PropTypes.number,
-    wrapped: PropTypes.bool,
-    placeholder: PropTypes.string,
-  };
+const TextWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    focus,
+  } = props;
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    value: null,
-    onChange: () => {},
-    onBlur: () => {},
-    onClick: () => {},
-    onEdit: null,
-    onDelete: null,
-    focus: false,
-    icon: null,
-    iconAction: null,
-    minLength: null,
-    maxLength: null,
-  };
+  const ref = useRef();
 
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.focus) {
-      this.node.focus();
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
     }
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      value,
-      onChange,
-      onBlur,
-      onClick,
-      icon,
-      iconAction,
-      minLength,
-      maxLength,
-      placeholder,
-      isDisabled,
-    } = this.props;
+export default TextWidget;
 
-    return (
-      <FormFieldWrapper {...this.props} className="text">
-        <Input
-          id={`field-${id}`}
-          name={id}
-          value={value || ''}
-          disabled={isDisabled}
-          icon={icon || null}
-          placeholder={placeholder}
-          onChange={({ target }) =>
-            onChange(id, target.value === '' ? undefined : target.value)
-          }
-          ref={(node) => {
-            this.node = node;
-          }}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
-          onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
-        />
-        {icon && iconAction && (
-          <button className={`field-${id}-action-button`} onClick={iconAction}>
-            <Icon name={icon} size="18px" />
-          </button>
-        )}
-      </FormFieldWrapper>
-    );
-  }
-}
+TextWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
 
-export default injectIntl(TextWidget);
+TextWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+};
diff --git a/packages/volto/src/components/manage/Widgets/TextWidget.stories.jsx b/packages/volto/src/components/manage/Widgets/TextWidget.stories.jsx
index 173228c952..885d1fa1e6 100644
--- a/packages/volto/src/components/manage/Widgets/TextWidget.stories.jsx
+++ b/packages/volto/src/components/manage/Widgets/TextWidget.stories.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import TextWidget from './TextWidget';
 import WidgetStory from './story';
 
@@ -6,7 +5,10 @@ export const Text = WidgetStory.bind({
   props: { id: 'text', title: 'Text' },
   widget: TextWidget,
 });
-
+Text.args = {
+  description: 'description',
+  placeholder: 'placeholder',
+};
 export default {
   title: 'Edit Widgets/Text',
   component: TextWidget,
@@ -17,5 +19,14 @@ export default {
       </div>
     ),
   ],
-  argTypes: {},
+  argTypes: {
+    description: {
+      control: 'text',
+      description: 'description',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'placeholder',
+    },
+  },
 };