diff --git a/protocol-designer/src/molecules/TextAreaField/TextAreaField.stories.tsx b/protocol-designer/src/molecules/TextAreaField/TextAreaField.stories.tsx
new file mode 100644
index 00000000000..ec0cf083d27
--- /dev/null
+++ b/protocol-designer/src/molecules/TextAreaField/TextAreaField.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+import { TextAreaField as TextAreaFieldComponent } from '.'
+
+import type { ComponentProps } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TextAreaFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
+  title: 'Protocol-Designer/Molecules/TextAreaField',
+  component: TextAreaFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {},
+}
+
+export default meta
+type Story = StoryObj<typeof TextAreaFieldComponent>
+
+export const TextAreaField: Story = (
+  args: ComponentProps<typeof TextAreaFieldComponent>
+) => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <TextAreaFieldComponent
+        {...args}
+        value={value}
+        onChange={e => {
+          setValue(e.currentTarget.value)
+        }}
+      />
+    </Flex>
+  )
+}
+
+TextAreaField.args = {
+  title: 'TextAreaField',
+  height: '6.8125rem',
+  placeholder: 'Placeholder Text',
+}
diff --git a/protocol-designer/src/molecules/TextAreaField/__tests__/TextAreaField.test.tsx b/protocol-designer/src/molecules/TextAreaField/__tests__/TextAreaField.test.tsx
new file mode 100644
index 00000000000..ce7a90feef4
--- /dev/null
+++ b/protocol-designer/src/molecules/TextAreaField/__tests__/TextAreaField.test.tsx
@@ -0,0 +1,69 @@
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { screen, fireEvent } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { TextAreaField } from '../'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TextAreaField>) => {
+  return renderWithProviders(<TextAreaField {...props} />)
+}
+
+describe('TextAreaField', () => {
+  let props: ComponentProps<typeof TextAreaField>
+
+  beforeEach(() => {
+    props = {
+      title: 'TextAreaField',
+      placeholder: 'Enter text...',
+      value: '',
+      onChange: vi.fn(),
+    }
+  })
+
+  it('renders the TextAreaField component', () => {
+    render(props)
+    screen.getByText('TextAreaField')
+    expect(screen.getByTestId('TextAreaField')).toBeInTheDocument()
+  })
+
+  it('displays the correct placeholder text', () => {
+    render(props)
+    expect(screen.getByPlaceholderText('Enter text...')).toBeInTheDocument()
+  })
+
+  it('updates value when user types', () => {
+    render(props)
+    const textarea = screen.getByTestId('TextAreaField')
+
+    fireEvent.change(textarea, { target: { value: 'Hello, world!' } })
+
+    expect(props.onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables the textarea when disabled prop is true', () => {
+    props.disabled = true
+    render(props)
+    expect(screen.getByTestId('TextAreaField')).toBeDisabled()
+  })
+
+  it('displays an error message when error prop is provided', () => {
+    props.error = 'Error: Invalid input'
+    render(props)
+
+    expect(screen.getByText('Error: Invalid input')).toBeInTheDocument()
+  })
+
+  it('display an icon when tooltip prop is provided', () => {
+    props.tooltipText = 'ot-icon-check'
+    render(props)
+    screen.getByTestId('tooltip-icon')
+  })
+
+  it('display left icon when leftIcon prop is provided', () => {
+    props.leftIcon = 'information'
+    render(props)
+    screen.getByTestId('left-icon')
+  })
+})
diff --git a/protocol-designer/src/molecules/TextAreaField/index.tsx b/protocol-designer/src/molecules/TextAreaField/index.tsx
new file mode 100644
index 00000000000..7bc91ea616a
--- /dev/null
+++ b/protocol-designer/src/molecules/TextAreaField/index.tsx
@@ -0,0 +1,314 @@
+import { useEffect, useState, forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  Icon,
+  PRODUCT,
+  SPACING,
+  StyledText,
+  TEXT_ALIGN_RIGHT,
+  Tooltip,
+  TYPOGRAPHY,
+  useHoverTooltip,
+} from '@opentrons/components'
+
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  MutableRefObject,
+} from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { IconName } from '@opentrons/components'
+
+const COLOR_WARNING_DARK = '#9e5e00' // ToDo (kk:08/13/2024) replace this with COLORS
+
+// hook to detect tab focus vs mouse focus
+const useFocusVisible = (): boolean => {
+  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false)
+
+  useEffect(() => {
+    const handleKeyDown = (): void => {
+      setIsKeyboardFocus(true)
+    }
+    const handleMouseDown = (): void => {
+      setIsKeyboardFocus(false)
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleMouseDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [])
+
+  return isKeyboardFocus
+}
+
+export interface TextAreaFieldProps {
+  /** field is disabled if value is true */
+  disabled?: boolean
+  /** change handler */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
+  /** name of field in form */
+  name?: string
+  /** optional ID of <textarea> element */
+  id?: string
+  /** placeholder text */
+  placeholder?: string
+  /** current value of text in box, defaults to '' */
+  value?: string | number | null
+  /** if included, TextAreaField will use error style and display error instead of caption */
+  error?: string | null
+  /** optional title */
+  title?: string | null
+  /** optional text for tooltip */
+  tooltipText?: string
+  /** optional caption. hidden when `error` is given */
+  caption?: string | null
+  /** mouse click handler */
+  onClick?: (event: MouseEvent<HTMLTextAreaElement>) => unknown
+  /** focus handler */
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => unknown
+  /** blur handler */
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => unknown
+  /** makes textarea field read-only */
+  readOnly?: boolean
+  /** automatically focus field on renders */
+  autoFocus?: boolean
+  /** if true, clear out value and add '-' placeholder */
+  isIndeterminate?: boolean
+  /** horizontal text alignment for title, textarea, and (sub)captions */
+  textAlign?:
+    | typeof TYPOGRAPHY.textAlignLeft
+    | typeof TYPOGRAPHY.textAlignCenter
+  /** react useRef to control textarea field instead of react event */
+  ref?: MutableRefObject<HTMLTextAreaElement | null>
+  /** optional IconName to display icon aligned to left of textarea field */
+  leftIcon?: IconName
+  /** if true, show delete icon aligned to right of textarea field */
+  showDeleteIcon?: boolean
+  /** callback passed to optional delete icon onClick */
+  onDelete?: () => void
+  /** if true, style the background of textarea field to error state */
+  hasBackgroundError?: boolean
+  /** optional prop to override textarea field border radius */
+  borderRadius?: string
+  /** optional prop to override textarea field padding */
+  padding?: string
+  /** optional prop to override textarea field height */
+  height?: string
+  /** optional prop to override textarea field resize default is none */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+}
+
+export const TextAreaField = forwardRef<
+  HTMLTextAreaElement,
+  TextAreaFieldProps
+>(
+  (props, ref): JSX.Element => {
+    const {
+      placeholder,
+      textAlign = TYPOGRAPHY.textAlignLeft,
+      title,
+      tooltipText,
+      error,
+      disabled,
+      isIndeterminate,
+      showDeleteIcon = false,
+      hasBackgroundError = false,
+      onDelete,
+      borderRadius,
+      padding,
+      height,
+      leftIcon,
+      caption,
+      resize = 'none',
+      ...textAreaProps
+    } = props
+
+    const hasError = error != null
+    const value = isIndeterminate ?? false ? '' : props.value ?? ''
+    const placeHolder = isIndeterminate ?? false ? '-' : placeholder
+    const [targetProps, tooltipProps] = useHoverTooltip()
+    const isKeyboardFocus = useFocusVisible() // Track focus method
+
+    return (
+      <Flex
+        width="100%"
+        alignItems={ALIGN_CENTER}
+        color={error ? COLOR_WARNING_DARK : COLORS.black90}
+        opacity={disabled === true ? 0.5 : ''}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+          {title != null && (
+            <Flex
+              flexDirection={DIRECTION_ROW}
+              gridGap={SPACING.spacing8}
+              alignItems={ALIGN_CENTER}
+            >
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                htmlFor={props.id}
+                css={TITLE_STYLE(textAlign)}
+              >
+                {title}
+              </StyledText>
+              {tooltipText != null && (
+                <>
+                  <Flex {...targetProps}>
+                    <Icon
+                      name="information"
+                      size={SPACING.spacing12}
+                      color={COLORS.grey60}
+                      data-testid="tooltip-icon"
+                    />
+                  </Flex>
+                  <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+                </>
+              )}
+            </Flex>
+          )}
+          <Flex
+            width="100%"
+            flexDirection={DIRECTION_COLUMN}
+            onClick={!disabled ? props.onClick : undefined}
+          >
+            <Flex
+              alignItems={ALIGN_CENTER}
+              gridGap={leftIcon !== undefined ? SPACING.spacing8 : 0}
+            >
+              {leftIcon !== undefined && (
+                <Flex>
+                  <Icon
+                    name={leftIcon}
+                    color={COLORS.grey60}
+                    size="1.25rem"
+                    data-testid="left-icon"
+                  />
+                </Flex>
+              )}
+              <StyledTextArea
+                data-testid="TextAreaField"
+                hasBackgroundError={hasBackgroundError}
+                hasError={hasError}
+                height={height}
+                padding={padding}
+                borderRadius={borderRadius}
+                resize={resize}
+                {...textAreaProps}
+                value={value}
+                placeholder={placeHolder}
+                onWheel={event => {
+                  event.currentTarget.blur()
+                }} // prevent value change with scrolling
+                ref={ref}
+                isKeyboardFocus={isKeyboardFocus}
+                disabled={disabled}
+              />
+              {showDeleteIcon && (
+                <Flex
+                  alignSelf={TEXT_ALIGN_RIGHT}
+                  onClick={onDelete}
+                  cursor="pointer"
+                >
+                  <Icon name="close" size="1.75rem" />
+                </Flex>
+              )}
+            </Flex>
+          </Flex>
+          {caption != null && (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={FORM_BOTTOM_SPACE_STYLE}
+              color={COLORS.grey60}
+            >
+              {caption}
+            </StyledText>
+          )}
+          {hasError && (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={ERROR_TEXT_STYLE}
+            >
+              {props.error}
+            </StyledText>
+          )}
+        </Flex>
+      </Flex>
+    )
+  }
+)
+
+interface StyledTextAreaProps {
+  resize: 'none' | 'vertical' | 'horizontal' | 'both'
+  hasBackgroundError: boolean
+  hasError?: boolean
+  height?: string
+  padding?: string
+  borderRadius?: string
+  isKeyboardFocus: boolean
+  disabled?: boolean
+}
+
+// Styled component with correct focus behavior
+const StyledTextArea = styled.textarea<StyledTextAreaProps>`
+  background-color: ${({ hasBackgroundError }) =>
+    hasBackgroundError ? COLORS.red30 : COLORS.white};
+  border-radius: ${({ borderRadius }) => borderRadius ?? BORDERS.borderRadius4};
+  padding: ${({ padding }) => padding ?? SPACING.spacing8};
+  border: ${({ hasBackgroundError, hasError }) =>
+    hasBackgroundError
+      ? 'none'
+      : `1px ${BORDERS.styleSolid} ${
+          hasError === true ? COLORS.red50 : COLORS.grey50
+        }`};
+  font-size: ${PRODUCT.TYPOGRAPHY.fontSizeBodyDefaultSemiBold};
+  font-weight: ${TYPOGRAPHY.fontWeightRegular};
+  width: 100%;
+  height: ${({ height }) => height ?? '100%'};
+  resize: ${({ resize }) => resize};
+
+  &:focus {
+    border: 1px ${BORDERS.styleSolid}
+      ${({ hasError }) => (hasError === true ? COLORS.red50 : COLORS.blue50)};
+    outline: none;
+  }
+
+  ${({ isKeyboardFocus }) =>
+    isKeyboardFocus &&
+    `
+      &:focus {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+        outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+        outline-offset: 2px;
+      }
+    `}
+
+  &:disabled {
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+    background-color: ${COLORS.grey20};
+  }
+`
+
+const FORM_BOTTOM_SPACE_STYLE = css`
+  padding-top: ${SPACING.spacing4};
+`
+
+const TITLE_STYLE = (textAlign: string): FlattenSimpleInterpolation => css`
+  color: ${COLORS.grey60};
+  padding-bottom: ${SPACING.spacing4};
+  text-align: ${textAlign};
+`
+
+const ERROR_TEXT_STYLE = css`
+  color: ${COLORS.red50};
+  padding-top: ${SPACING.spacing4};
+`
diff --git a/protocol-designer/src/molecules/index.ts b/protocol-designer/src/molecules/index.ts
index 8a65e96180b..4c418938eb4 100644
--- a/protocol-designer/src/molecules/index.ts
+++ b/protocol-designer/src/molecules/index.ts
@@ -3,5 +3,6 @@ export * from './CheckboxStepFormField'
 export * from './DropdownStepFormField'
 export * from './InputStepFormField'
 export * from './LiquidButton'
+export * from './TextAreaField'
 export * from './ToggleExpandStepFormField'
 export * from './ToggleStepFormField'
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
index 50617a936a3..9fe6003fefe 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
@@ -1,19 +1,17 @@
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
 
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
-  BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   InputField,
   SPACING,
   StyledText,
-  TYPOGRAPHY,
 } from '@opentrons/components'
 import { HandleEnter } from '../../atoms/HandleEnter'
+import { TextAreaField } from '../../molecules'
 import { analyticsEvent } from '../../analytics/actions'
 import { ONBOARDING_FLOW_DURATION_EVENT } from '../../analytics/constants'
 import { WizardBody } from './WizardBody'
@@ -58,7 +56,11 @@ export function AddMetadata(props: AddMetadataProps): JSX.Element | null {
         }}
         proceed={handleProceed}
       >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing16}
+          padding={`0 ${SPACING.spacing4}`}
+        >
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
             <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
               {t('name')}
@@ -73,10 +75,12 @@ export function AddMetadata(props: AddMetadataProps): JSX.Element | null {
             />
           </Flex>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-            <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
-              {t('description')}
-            </StyledText>
-            <DescriptionField {...register('fields.description')} />
+            <TextAreaField
+              title={t('description')}
+              {...register('fields.description')}
+              value={watch('fields.description')}
+              height="6.8125rem"
+            />
           </Flex>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
             <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
@@ -95,13 +99,3 @@ export function AddMetadata(props: AddMetadataProps): JSX.Element | null {
     </HandleEnter>
   )
 }
-
-export const DescriptionField = styled.textarea`
-  min-height: 5rem;
-  width: 100%;
-  border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
-  border-radius: ${BORDERS.borderRadius4};
-  padding: ${SPACING.spacing8};
-  font-size: ${TYPOGRAPHY.fontSizeP};
-  resize: none;
-`