diff --git a/packages/harmony/src/components/input/TextInput/TextInput.module.css b/packages/harmony/src/components/input/TextInput/TextInput.module.css
new file mode 100644
index 00000000000..6116108f571
--- /dev/null
+++ b/packages/harmony/src/components/input/TextInput/TextInput.module.css
@@ -0,0 +1,131 @@
+/* The absolute root of the entire component, including assistive text */
+.root {
+  /* This isolates z-index to only affect this component */
+  isolation: isolate;
+}
+
+/* The contentContainer is the root container of all things that aren't assistive text */
+.contentContainer {
+  display: flex;
+  align-items: center;
+  /* Dont need Y padding since the flex centering takes care of it */
+  padding: 0 var(--harmony-spacing-l);
+  border: 1px solid var(--harmony-border-default);
+  border-radius: var(--harmony-border-radius-s);
+  background-color: var(--harmony-bg-surface-1);
+  transition: border ease-in-out 0.1s;
+  box-sizing: border-box;
+  & svg path {
+    fill: var(--harmony-text-subdued);
+  }
+}
+
+/* hover border color */
+.contentContainer:hover {
+  border-color: var(--harmony-border-strong);
+}
+
+/* small input size */
+.contentContainer.small {
+  /* gap between icons & content */
+  gap: var(--harmony-spacing-s);
+  font-size: var(--harmony-font-s);
+  height: 34px;
+}
+
+/* default input size */
+.contentContainer.contentContainer.default {
+  /* gap between icons & content */
+  gap: var(--harmony-spacing-m);
+  font-size: var(--harmony-font-m);
+  height: 64px;
+}
+
+/* focused border color */
+.contentContainer.focused,
+.contentContainer.focused:hover {
+  border-color: var(--harmony-secondary);
+}
+
+/* warning border color */
+.contentContainer.warning,
+.contentContainer.warning.focused,
+.contentContainer.warning:hover {
+  border-color: var(--harmony-orange);
+}
+
+/* error border color */
+.contentContainer.error,
+.contentContainer.error.focused,
+.contentContainer.error:hover {
+  border-color: var(--harmony-red);
+}
+
+/* disabled styles */
+.contentContainer.disabled {
+  cursor: not-allowed;
+  & * {
+    cursor: not-allowed;
+  }
+}
+
+/* Actual input element */
+.input {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border: 0;
+  background: none;
+  font-weight: var(--harmony-font-medium);
+  color: var(--harmony-text-default);
+  text-overflow: ellipsis;
+}
+
+.input.focused {
+  caret-color: var(--harmony-secondary);
+}
+
+.input.disabled,
+.input.disabled::placeholder {
+  color: var(--harmony-text-subdued);
+}
+
+/* Change font size of the input based on size */
+.input.small {
+  font-size: var(--harmony-font-s);
+}
+.input.default {
+  font-size: var(--harmony-font-l);
+}
+
+/* Placeholder and label text styles (they are the same for the most part) */
+.input::placeholder,
+.label {
+  color: var(--harmony-text-default);
+  font-weight: var(--harmony-font-medium);
+  font-family: var(--harmony-font-family);
+}
+
+/** Position the label in the center when unfocussed **/
+.label {
+  color: var(--harmony-text-subdued);
+  /* text overflow should just break off into the ellipses */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 2;
+  transition: all var(--harmony-expressive);
+  /* When not focussed, the label centers itself visually */
+  transform: translate(
+    0px,
+    13px
+  ); /* 13px is a ✨magic✨ number that makes it look centered with the input */
+}
+
+/** Shrink the size of the label **/
+.label.focused,
+.hasValue {
+  transform: translate(0, 0);
+  font-size: var(--harmony-font-s);
+}
diff --git a/packages/harmony/src/components/input/TextInput/TextInput.stories.tsx b/packages/harmony/src/components/input/TextInput/TextInput.stories.tsx
new file mode 100644
index 00000000000..c0439a457ad
--- /dev/null
+++ b/packages/harmony/src/components/input/TextInput/TextInput.stories.tsx
@@ -0,0 +1,95 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IconSearch, IconVisibilityHidden } from '../../typography'
+
+import { TextInput } from './TextInput'
+import { TextInputProps, TextInputSize } from './types'
+
+const StoryRender = (props: TextInputProps) => {
+  const [value, setValue] = useState(props.value)
+  return (
+    <TextInput
+      {...props}
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value)
+      }}
+    />
+  )
+}
+
+const meta: Meta<typeof TextInput> = {
+  title: 'Components/Input/TextInput',
+  component: TextInput,
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ['inputRef', 'inputRootClassName', 'inputClassName']
+      }
+    }
+  },
+  render: StoryRender
+}
+
+export default meta
+
+type Story = StoryObj<typeof TextInput>
+
+export const Default: Story = {
+  args: {
+    label: 'Input Label',
+    helperText: 'This is assistive text.',
+    placeholder: 'Placeholder'
+  }
+}
+
+export const Small: Story = {
+  args: {
+    label: 'Input Label',
+    size: TextInputSize.SMALL,
+    helperText: 'This is assistive text.',
+    placeholder: 'Placeholder',
+    startIcon: IconSearch
+  }
+}
+
+export const TextAdornments: Story = {
+  args: {
+    label: 'Input Label',
+    helperText: 'This is assistive text.',
+    placeholder: 'Enter an amount',
+    startAdornmentText: '@',
+    endAdornmentText: '$AUDIO'
+  }
+}
+
+export const Icons: Story = {
+  args: {
+    label: 'Input Label',
+    helperText: 'This is assistive text.',
+    placeholder: 'Your handle',
+    startIcon: IconSearch,
+    endIcon: IconVisibilityHidden
+  }
+}
+
+export const MaxCharacters: Story = {
+  args: {
+    label: 'Input Label',
+    helperText: 'This is assistive text.',
+    placeholder: 'Your handle',
+    maxLength: 60,
+    value: 'Flying a little close to the character limit there bud 🦅'
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Input Label',
+    helperText: 'This is assistive text.',
+    disabled: true,
+    value: "You couldn't change me if you tried"
+  }
+}
diff --git a/packages/harmony/src/components/input/TextInput/TextInput.tsx b/packages/harmony/src/components/input/TextInput/TextInput.tsx
new file mode 100644
index 00000000000..6302556f9b5
--- /dev/null
+++ b/packages/harmony/src/components/input/TextInput/TextInput.tsx
@@ -0,0 +1,185 @@
+import { forwardRef, useId } from 'react'
+
+import cn from 'classnames'
+
+import { Text, TextSize } from 'components/typography'
+
+import { Flex } from '../../layout'
+import { useFocusState } from '../useFocusState'
+
+import styles from './TextInput.module.css'
+import { TextInputSize, type TextInputProps } from './types'
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  (props, ref) => {
+    const {
+      required,
+      className,
+      inputRootClassName,
+      maxLength,
+      showMaxLengthThreshold = 0.7,
+      maxLengthWarningThreshold = 0.9,
+      size = TextInputSize.DEFAULT,
+      hideLabel,
+      label: labelProp,
+      value,
+      id: idProp,
+      warning: warningProp,
+      error,
+      className: inputClassName,
+      disabled,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      placeholder,
+      helperText,
+      startAdornmentText,
+      endAdornmentText,
+      startIcon: StartIcon,
+      endIcon: EndIcon,
+      ...other
+    } = props
+
+    /**
+     * Since Firefox doesn't support the :has() pseudo selector,
+     * manually track the focused state and use classes for focus, required, and disabled
+     */
+    const [isFocused, handleFocus, handleBlur] = useFocusState(
+      onFocusProp,
+      onBlurProp
+    )
+
+    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input
+    const backupId = useId()
+    const id = idProp ?? backupId
+
+    const characterCount = value !== undefined ? `${value}`.length : 0
+    const hasValue = characterCount > 0
+
+    // Hide the label when requested or when the size is set to small
+    const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL
+    const labelText = required ? `${labelProp} *` : labelProp
+    const placeholderText =
+      required && hideLabel ? `${placeholder} *` : placeholder
+    const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'
+
+    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)
+    const shouldShowPlaceholder = isFocused || !shouldShowLabel
+    const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel
+    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused
+    const shouldShowMaxLengthText =
+      isFocused &&
+      maxLength &&
+      characterCount >= showMaxLengthThreshold * maxLength
+    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)
+    const showMaxlengthWarningColor =
+      maxLength && characterCount >= maxLengthWarningThreshold * maxLength
+
+    // Styles for the root of the input
+    const inputRootStyle = {
+      [styles.default]: size === TextInputSize.DEFAULT,
+      [styles.small]: size === TextInputSize.SMALL,
+      [styles.warning]: warningProp,
+      [styles.error]: error,
+      [styles.focused]: isFocused,
+      [styles.disabled]: disabled,
+      [styles.required]: required
+    }
+
+    // Styles for the input element itself
+    const inputElStyle = {
+      [styles.default]: size === TextInputSize.DEFAULT,
+      [styles.small]: size === TextInputSize.SMALL,
+      [styles.disabled]: disabled,
+      [styles.focused]: isFocused
+    }
+
+    const inputRender = (
+      <Flex alignItems='center' justifyContent='space-between'>
+        {startAdornmentText && shouldShowAdornments ? (
+          <Text variant='label' size='l' color='subdued'>
+            {startAdornmentText}
+          </Text>
+        ) : null}
+        <input
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          ref={ref}
+          className={cn(styles.input, inputClassName, inputElStyle)}
+          value={value}
+          maxLength={maxLength}
+          disabled={disabled}
+          placeholder={shouldShowPlaceholder ? placeholderText : undefined}
+          aria-label={props['aria-label'] ?? labelText}
+          aria-required={required}
+          id={id}
+          {...other}
+        />
+        {endAdornmentText && shouldShowAdornments ? (
+          <Text variant='label' size='l' color='subdued'>
+            {endAdornmentText}
+          </Text>
+        ) : null}
+      </Flex>
+    )
+
+    return (
+      <Flex className={cn(styles.root, className)} direction='column' gap='xs'>
+        <label
+          htmlFor={id}
+          className={cn(
+            styles.contentContainer,
+            inputRootClassName,
+            inputRootStyle
+          )}
+        >
+          {StartIcon ? <StartIcon /> : null}
+          <Flex direction='column' gap='xs' justifyContent='center' w='100%'>
+            {shouldShowLabel ? (
+              <Flex
+                className={styles.labelRow}
+                direction='row'
+                alignItems='center'
+                justifyContent='space-between'
+                gap='s'
+              >
+                <Text
+                  variant='body'
+                  tag='span'
+                  size='l'
+                  className={cn(styles.label, {
+                    [styles.hasValue]: hasValue,
+                    [styles.focused]: isFocused
+                  })}
+                >
+                  {labelText}
+                </Text>
+                {shouldShowMaxLengthText ? (
+                  <Text
+                    variant='body'
+                    size='xs'
+                    tag='span'
+                    color={showMaxlengthWarningColor ? 'warning' : 'default'}
+                  >
+                    {characterCount}/{maxLength}
+                  </Text>
+                ) : null}
+              </Flex>
+            ) : null}
+            {inputRender}
+          </Flex>
+          {EndIcon ? <EndIcon /> : null}
+        </label>
+        {helperText ? (
+          <Text
+            variant='body'
+            size={helperTextSize}
+            strength='default'
+            color={error ? 'danger' : 'default'}
+          >
+            {helperText}
+          </Text>
+        ) : null}
+      </Flex>
+    )
+  }
+)
diff --git a/packages/harmony/src/components/input/TextInput/index.ts b/packages/harmony/src/components/input/TextInput/index.ts
new file mode 100644
index 00000000000..a5ca7875fc3
--- /dev/null
+++ b/packages/harmony/src/components/input/TextInput/index.ts
@@ -0,0 +1 @@
+export * from './TextInput'
diff --git a/packages/harmony/src/components/input/TextInput/types.ts b/packages/harmony/src/components/input/TextInput/types.ts
new file mode 100644
index 00000000000..679efd8cde4
--- /dev/null
+++ b/packages/harmony/src/components/input/TextInput/types.ts
@@ -0,0 +1,75 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import type { IconComponent } from '../../typography'
+
+export enum TextInputSize {
+  SMALL = 'small',
+  DEFAULT = 'default'
+}
+
+export type TextInputProps = Omit<
+  ComponentPropsWithoutRef<'input'>,
+  // Omitting required purely for storybook docs
+  'size' | 'required'
+> & {
+  /**
+   * Input sizes. NOTE: small inputs will not show the label
+   * @default default
+   */
+  size?: TextInputSize
+  /**
+   * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment
+   */
+  warning?: boolean
+  /**
+   * Toggles error state
+   */
+  error?: boolean
+  /**
+   * Hides the label. If the label is hidden the placeholder will show by default instead.
+   * @default false
+   */
+  hideLabel?: boolean
+  /**
+   * Label Text. Required to provide due to accessibility. If the hideLabel is true, the label used via aria-label
+   */
+  label: string
+  /**
+   * ClassName on the div wrapping the whole input container (doesn't include assistive text)
+   */
+  inputRootClassName?: string
+  /**
+   * Helper text (or JSX) that shows up below the input
+   */
+  helperText?: string | ReactNode
+  /**
+   * Floating text on the lefthand side of the input.
+   */
+  startAdornmentText?: string
+  /**
+   * Floating text on the righthand side of the input
+   */
+  endAdornmentText?: string
+  /**
+   * Floating icon on the lefthand side of the input. Note: will float to the left of the label & content
+   */
+  startIcon?: IconComponent
+  /**
+   * Floating text on the righthand side of the input
+   */
+  endIcon?: IconComponent
+  /**
+   * Required or not. Will add an * to the label if required
+   */
+  required?: boolean
+  /**
+   * 0-1 number representating a percentage threshold to show the max character text. Default is 0.7 (70%)
+   * @default 0.7
+   */
+  showMaxLengthThreshold?: number
+  /**
+   * 0-1 number representating a percentage threshold to turn the character limit text orange. Default is 0.9 (90%)
+   * @default 0.9
+   */
+  maxLengthWarningThreshold?: number
+}
diff --git a/packages/harmony/src/components/input/index.ts b/packages/harmony/src/components/input/index.ts
index b03aeb1facb..d151ec81ee0 100644
--- a/packages/harmony/src/components/input/index.ts
+++ b/packages/harmony/src/components/input/index.ts
@@ -1 +1,3 @@
 export * from './SelectablePill'
+export * from './TextInput'
+export * from './useFocusState'
diff --git a/packages/harmony/src/components/input/useFocusState.ts b/packages/harmony/src/components/input/useFocusState.ts
new file mode 100644
index 00000000000..98afce3cf14
--- /dev/null
+++ b/packages/harmony/src/components/input/useFocusState.ts
@@ -0,0 +1,39 @@
+import { useState, useCallback, FocusEventHandler } from 'react'
+
+/**
+ * Used to track focus state of an element
+ *
+ * Why: Firefox doesn't support the :has() pseudo-selector, so we can't do .root:has(input:focus)
+ * for focus styles. Instead, we have to manually track the focus state and add a class.
+ *
+ * To use:
+ * - Pass in other handlers wanted for focus and blur as appropriate
+ * - Assign handleFocus to the onFocus of the element
+ * - Assign handleBlur to the onBlur of the element
+ *
+ * @param onFocus The existing onFocus handler, if any, to wrap
+ * @param onBlur The existing onBlur handler, if any, to wrap
+ * @returns [isFocused, handleFocus, handleBlur]
+ */
+export const useFocusState = <T extends HTMLElement>(
+  onFocus?: FocusEventHandler<T>,
+  onBlur?: FocusEventHandler<T>
+) => {
+  const [isFocused, setIsFocused] = useState(false)
+  const handleFocus = useCallback<FocusEventHandler<T>>(
+    (e) => {
+      setIsFocused(true)
+      onFocus?.(e)
+    },
+    [onFocus, setIsFocused]
+  )
+  const handleBlur = useCallback<FocusEventHandler<T>>(
+    (e) => {
+      setIsFocused(false)
+      onBlur?.(e)
+    },
+    [onBlur, setIsFocused]
+  )
+
+  return [isFocused, handleFocus, handleBlur] as const
+}
diff --git a/packages/harmony/src/components/layout/layout.module.css b/packages/harmony/src/components/layout/layout.module.css
new file mode 100644
index 00000000000..f1e4adde00f
--- /dev/null
+++ b/packages/harmony/src/components/layout/layout.module.css
@@ -0,0 +1,34 @@
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .gap1 {
+    gap: var(--unit-1);
+  }
+  .gap2 {
+    gap: var(--unit-2);
+  }
+  .gap3 {
+    gap: var(--unit-3);
+  }
+  .gap4 {
+    gap: var(--unit-4);
+  }
+  .gap5 {
+    gap: var(--unit-5);
+  }
+  .gap6 {
+    gap: var(--unit-6);
+  }
+  
+  .gapAuto {
+    justify-content: space-between;
+  }
+  
\ No newline at end of file
diff --git a/packages/harmony/src/components/typography/Text/types.ts b/packages/harmony/src/components/typography/Text/types.ts
index 22b1ce51d58..1d66c42af20 100644
--- a/packages/harmony/src/components/typography/Text/types.ts
+++ b/packages/harmony/src/components/typography/Text/types.ts
@@ -22,7 +22,13 @@ export type TextProps<TextComponentType extends ElementType = 'p'> =
 
 export type TextStrength = 'weak' | 'default' | 'strong'
 
-export type TextColor = 'heading' | 'default' | 'subdued' | 'disabled'
+export type TextColor =
+  | 'heading'
+  | 'default'
+  | 'subdued'
+  | 'disabled'
+  | 'danger'
+  | 'warning'
 
 export type TextSize = 'xl' | 'l' | 'm' | 's' | 'xs'
 
diff --git a/packages/harmony/src/components/typography/Text/typography.module.css b/packages/harmony/src/components/typography/Text/typography.module.css
index 08825e7cb74..618905205f7 100644
--- a/packages/harmony/src/components/typography/Text/typography.module.css
+++ b/packages/harmony/src/components/typography/Text/typography.module.css
@@ -45,6 +45,14 @@
   color: var(--harmony-text-disabled);
 }
 
+.colorDanger {
+  color: var(--harmony-red);
+}
+
+.colorWarning {
+  color: var(--harmony-orange);
+}
+
 /* --- Display Styles --- */
 .display {
   font-weight: var(--harmony-font-bold);