diff --git a/protocol-designer/src/atoms/TextAreaField/index.tsx b/protocol-designer/src/atoms/TextAreaField/index.tsx
new file mode 100644
index 00000000000..03f449f0b9a
--- /dev/null
+++ b/protocol-designer/src/atoms/TextAreaField/index.tsx
@@ -0,0 +1,334 @@
+import { forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  Icon,
+  RESPONSIVENESS,
+  SPACING,
+  StyledText,
+  TEXT_ALIGN_RIGHT,
+  Tooltip,
+  TYPOGRAPHY,
+  useHoverTooltip,
+} from '@opentrons/components'
+
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  MutableRefObject,
+  ReactNode,
+} from 'react'
+import type { IconName } from '@opentrons/components'
+
+const COLOR_WARNING_DARK = '#9e5e00' // ToDo (kk:08/13/2024) replace this with COLORS
+
+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
+  /** optional suffix component, appears to the right of textarea text */
+  units?: ReactNode
+  /** 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
+  /** html tabindex property */
+  tabIndex?: number
+  /** 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 */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+}
+
+export const TextAreaField = forwardRef<
+  HTMLTextAreaElement,
+  TextAreaFieldProps
+>(
+  (props, ref): JSX.Element => {
+    const {
+      placeholder,
+      textAlign = TYPOGRAPHY.textAlignLeft,
+      title,
+      tooltipText,
+      tabIndex = 0,
+      showDeleteIcon = false,
+      hasBackgroundError = false,
+      onDelete,
+      borderRadius,
+      padding,
+      height,
+      resize = 'vertical',
+      ...textAreaProps
+    } = props
+    const hasError = props.error != null
+    const value = props.isIndeterminate ?? false ? '' : props.value ?? ''
+    const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder
+    const [targetProps, tooltipProps] = useHoverTooltip()
+
+    const TEXTAREA_FIELD = css`
+      display: flex;
+      background-color: ${hasBackgroundError ? COLORS.red30 : COLORS.white};
+      border-radius: ${borderRadius ?? BORDERS.borderRadius4};
+      padding: ${padding ?? SPACING.spacing8};
+      border: ${hasBackgroundError
+        ? 'none'
+        : `1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey50}`};
+      font-size: ${TYPOGRAPHY.fontSizeP};
+      width: 100%;
+      height: ${height};
+
+      &:active:enabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+      }
+
+      & textarea {
+        border-radius: inherit;
+        color: ${COLORS.black90};
+        border: none;
+        flex: 1 1 auto;
+        width: 100%;
+        height: ${SPACING.spacing16};
+        text-align: ${textAlign};
+      }
+
+      & textarea:focus {
+        outline: none;
+      }
+
+      &:hover {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey60};
+      }
+
+      &:focus-visible {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+        outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+        outline-offset: 2px;
+      }
+
+      &:focus-within {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.blue50};
+      }
+
+      &:disabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+      }
+    `
+
+    const FORM_BOTTOM_SPACE_STYLE = css`
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        padding: ${SPACING.spacing8} 0rem;
+        padding-bottom: 0;
+      }
+    `
+
+    const TITLE_STYLE = css`
+      color: ${COLORS.grey60};
+      padding-bottom: ${SPACING.spacing4};
+      text-align: ${textAlign};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    const ERROR_TEXT_STYLE = css`
+      color: ${COLORS.red50};
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        color: ${COLORS.red50};
+        padding-top: ${SPACING.spacing8};
+      }
+    `
+
+    const UNITS_STYLE = css`
+      color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+      font: ${TYPOGRAPHY.bodyTextRegular};
+      text-align: ${TYPOGRAPHY.textAlignRight};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    return (
+      <Flex
+        width="100%"
+        alignItems={ALIGN_CENTER}
+        fontSize={TYPOGRAPHY.fontSizeP}
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90}
+        opacity={props.disabled ?? false ? 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}
+              >
+                {title}
+              </StyledText>
+              {tooltipText != null ? (
+                <>
+                  <Flex {...targetProps}>
+                    <Icon
+                      name="information"
+                      size={SPACING.spacing12}
+                      color={COLORS.grey60}
+                    />
+                  </Flex>
+                  <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+                </>
+              ) : null}
+            </Flex>
+          ) : null}
+          <Flex
+            width="100%"
+            flexDirection={DIRECTION_COLUMN}
+            onClick={!props.disabled ? props.onClick : null}
+          >
+            <Flex
+              tabIndex={tabIndex}
+              alignItems={ALIGN_CENTER}
+              onClick={() => {
+                if (props.id != null) {
+                  document.getElementById(props.id)?.focus()
+                }
+              }}
+            >
+              {props.leftIcon != null ? (
+                <Flex marginRight={SPACING.spacing8}>
+                  <Icon
+                    name={props.leftIcon}
+                    color={COLORS.grey60}
+                    size="1.25rem"
+                  />
+                </Flex>
+              ) : null}
+              <StyledTextArea
+                resize={resize}
+                {...textAreaProps}
+                css={TEXTAREA_FIELD}
+                data-testid={props.id}
+                value={value}
+                placeholder={placeHolder}
+                onWheel={event => {
+                  event.currentTarget.blur()
+                }} // prevent value change with scrolling
+                ref={ref}
+              />
+              {props.units != null ? (
+                <Flex css={UNITS_STYLE}>{props.units}</Flex>
+              ) : null}
+              {showDeleteIcon ? (
+                <Flex
+                  alignSelf={TEXT_ALIGN_RIGHT}
+                  onClick={onDelete}
+                  cursor="pointer"
+                >
+                  <Icon name="close" size="1.75rem" />
+                </Flex>
+              ) : null}
+            </Flex>
+          </Flex>
+          {props.caption != null ? (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={FORM_BOTTOM_SPACE_STYLE}
+              color={COLORS.grey60}
+            >
+              {props.caption}
+            </StyledText>
+          ) : null}
+          {hasError ? (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={ERROR_TEXT_STYLE}
+            >
+              {props.error}
+            </StyledText>
+          ) : null}
+        </Flex>
+      </Flex>
+    )
+  }
+)
+
+interface StyledTextAreaProps {
+  resize: 'none' | 'vertical' | 'horizontal' | 'both'
+}
+
+const StyledTextArea = styled.textarea<StyledTextAreaProps>`
+  background-color: transparent;
+  width: 100%;
+  min-height: 4.75rem;
+  resize: ${({ resize }) => resize};
+  white-space: pre-wrap;
+  &::placeholder {
+    color: ${COLORS.grey40};
+  }
+`
diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
index e04701a7639..f8242c9008f 100644
--- a/protocol-designer/src/atoms/constants.ts
+++ b/protocol-designer/src/atoms/constants.ts
@@ -3,6 +3,7 @@ import {
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
+  Flex,
   OVERFLOW_HIDDEN,
   SPACING,
   TYPOGRAPHY,
@@ -36,39 +37,56 @@ export const COLUMN_STYLE = css`
   flex: 1;
 `
 
+export const DescriptionFieldContainer: any = styled(Flex)`
+  border-radius: ${BORDERS.borderRadius4};
+
+  &:focus-visible {
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+    outline-offset: 2px;
+  }
+`
+
 export const DescriptionField = styled.textarea`
   min-height: 5rem;
   width: 100%;
-  border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
+  border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; /* Default border */
   border-radius: ${BORDERS.borderRadius4};
   padding: ${SPACING.spacing8};
   font-size: ${TYPOGRAPHY.fontSizeP};
   resize: none;
 
-  &:active:enabled {
-    border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+  /* Default (no pseudo-classes) */
+  &:not(:hover):not(:focus):not(:active) {
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
   }
 
+  /* Hover state */
   &:hover {
     border: 1px ${BORDERS.styleSolid} ${COLORS.grey60};
   }
 
-  &:focus-visible {
-    border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
-    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-    outline-offset: 2px;
+  /* Active state (clicking) */
+  &:active {
+    border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+    outline: none; /* Ensure the active state overrides focus-visible */
   }
 
-  &:focus-within {
-    border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+  &:focus {
+    outline: none;
   }
 
+  /* Focus-visible (keyboard focus) */
+  /* &:focus-visible {
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+    outline-offset: 2px;
+  } */
+
+  /* Disabled state */
   &:disabled {
     border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
-  }
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+    background-color: ${COLORS.grey20};
+    cursor: not-allowed;
   }
 `
diff --git a/protocol-designer/src/atoms/index.ts b/protocol-designer/src/atoms/index.ts
index b56d9bcd741..dd3d70393d6 100644
--- a/protocol-designer/src/atoms/index.ts
+++ b/protocol-designer/src/atoms/index.ts
@@ -1,2 +1,3 @@
 export * from './constants'
 export * from './Toggle'
+export * from './TextAreaField'
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
index afb8e83e9c7..387dbff03fe 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx
@@ -10,7 +10,11 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import { DescriptionField } from '../../atoms'
+import {
+  // DescriptionField,
+  // DescriptionFieldContainer,
+  TextAreaField,
+} from '../../atoms'
 import { HandleEnter } from '../../atoms/HandleEnter'
 import { analyticsEvent } from '../../analytics/actions'
 import { ONBOARDING_FLOW_DURATION_EVENT } from '../../analytics/constants'
@@ -73,7 +77,15 @@ export function AddMetadata(props: AddMetadataProps): JSX.Element | null {
             <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
               {t('description')}
             </StyledText>
-            <DescriptionField {...register('fields.description')} />
+            <TextAreaField
+              {...register('fields.description')}
+              value={watch('fields.description')}
+              height="6.8125rem"
+              resize="none"
+            />
+            {/* <DescriptionFieldContainer>
+              <DescriptionField {...register('fields.description')} />
+            </DescriptionFieldContainer> */}
           </Flex>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
             <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>