diff --git a/.changeset/input-component.md b/.changeset/input-component.md
new file mode 100644
index 000000000..acee9001f
--- /dev/null
+++ b/.changeset/input-component.md
@@ -0,0 +1,8 @@
+---
+"@cypress-design/react-button": patch
+"@cypress-design/react-input": patch
+"@cypress-design/vue-input": patch
+"@cypress-design/constants-input": patch
+---
+
+feat: input component
diff --git a/components/Button/assertions.ts b/components/Button/assertions.ts
index 19fdcec66..ba999e0db 100644
--- a/components/Button/assertions.ts
+++ b/components/Button/assertions.ts
@@ -26,7 +26,6 @@ export default function assertions(
       'text-decoration-line',
       'underline'
     )
-    cy
   })
 
   it('renders variants', () => {
diff --git a/components/Button/react/ReadMe.md b/components/Button/react/ReadMe.md
index df44a7679..e9d564331 100644
--- a/components/Button/react/ReadMe.md
+++ b/components/Button/react/ReadMe.md
@@ -49,10 +49,11 @@ export default () => {
             backgroundColor: variant === 'outline-dark' ? '#1a202c' : 'white',
             color: variant === 'outline-dark' ? 'white' : 'black',
           }}
+          key={variant}
         >
           {variant}
           {Object.keys(SizeClassesTable).map((size) => (
-            <div key={size} className="flex gap-[8px] items-center">
+            <div className="flex gap-[8px] items-center" key={size}>
               {size}
               <Button variant={variant} size={size}>
                 Button
diff --git a/components/Input/ReadMe.md b/components/Input/ReadMe.md
new file mode 100644
index 000000000..83679cf04
--- /dev/null
+++ b/components/Input/ReadMe.md
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import Input from '@cypress-design/vue-input'
+</script>
+
+# Input
+
+<DemoWrapper>
+	<Input/>
+</DemoWrapper>
+
+Describe your component here.
+
+[figma::Input (to be updated)](https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System%2C-v1.x---%40latest?type=design&t=vlt0Jvqi1bwqH4P0-0)
diff --git a/components/Input/assertions.ts b/components/Input/assertions.ts
new file mode 100644
index 000000000..d7f238a96
--- /dev/null
+++ b/components/Input/assertions.ts
@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+
+export default function assertions(mountStory: (options?: any) => void): void {
+  it('renders disabled', () => {
+    mountStory({ disabled: true })
+    cy.get('input').first().as('firstInput')
+    cy.log('disabled state should not allow text changes')
+    cy.get('@firstInput').should('have.value', '')
+    cy.get('@firstInput').type('my search')
+    cy.get('@firstInput').should('have.value', '')
+    cy.percySnapshot()
+  })
+
+  it('can type text', () => {
+    mountStory()
+    cy.get('input').first().as('firstInput')
+    cy.log('enabled state should allow text changes')
+    cy.get('@firstInput').should('have.value', '')
+    cy.get('@firstInput').type('my search')
+    cy.get('@firstInput').should('have.value', 'my search')
+    cy.percySnapshot()
+  })
+
+  it('calls onChange', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy')
+    mountStory({ onChange: onChangeSpy })
+    cy.get('input').first().as('firstInput')
+    cy.get('@firstInput').should('have.value', '')
+    cy.get('@firstInput')
+      .type('my search')
+      .get('@onChangeSpy')
+      .should('have.been.called')
+  })
+
+  it('calls onReset', () => {
+    const onResetSpy = cy.spy().as('onResetSpy')
+    mountStory({ onChange: onResetSpy })
+    cy.get('@onResetSpy').click().should('have.been.calledOnce')
+  })
+
+  it('shows search icon', () => {
+    mountStory({ isSearch: true })
+    cy.get('[data-cy="text-input--search-icon"]').should('exist')
+    cy.percySnapshot()
+  })
+
+  it('shows search results', () => {
+    mountStory({
+      searchResults: {
+        match: 7,
+        total: 124,
+        entity: 'specs',
+      },
+    })
+    cy.get('[data-cy="text-input--search-icon"]')
+      .should('exist')
+      .within(() => {
+        cy.should('have.text', '7 of 124 specs')
+      })
+    cy.percySnapshot()
+  })
+}
diff --git a/components/Input/constants/package.json b/components/Input/constants/package.json
new file mode 100644
index 000000000..b34dd5ca4
--- /dev/null
+++ b/components/Input/constants/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@cypress-design/constants-input",
+  "private": true,
+  "version": "0.3.0",
+  "files": [
+    "*"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc --project ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@cypress-design/icon-registry": "*"
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/components/Input/constants/src/index.ts b/components/Input/constants/src/index.ts
new file mode 100644
index 000000000..c8596b49e
--- /dev/null
+++ b/components/Input/constants/src/index.ts
@@ -0,0 +1,109 @@
+import * as React from 'react'
+import type { WindiColor } from '@cypress-design/icon-registry'
+
+export const SharedSettings = {}
+
+const enabledShadow =
+  'hover:shadow-ring-hover focus:shadow-ring-focus active:shadow-ring-focus'
+
+export const VariantClassesTable = {
+  default: `text-gray-800 border-gray-100 hocus:shadow-indigo-300/[.35] hocus:border-indigo-300 ${enabledShadow}`,
+  active: `text-gray-800 border-indigo-300 hocus:shadow-indigo-300/[.35] hocus:border-indigo-300 ${enabledShadow}`,
+  valid: `text-jade-500 border-jade-300 hocus:shadow-jade-300/[.35] hocus:border-jade-300 ${enabledShadow}`,
+  invalid: `text-red-500 border-red-300 hocus:shadow-red-300/[.35] hocus:border-red-300 ${enabledShadow}`,
+  warning: `text-gray-800 border-orange-300 hocus:shadow-orange-300/[.35] hocus:border-orange-300 ${enabledShadow}`,
+  disabled: `text-gray-600 bg-gray-50 border-gray-100 disabled:hocus:shadow-none`,
+} as const
+export type InputVariants = keyof typeof VariantClassesTable
+
+type InputClasses = {
+  icon: WindiColor
+}
+
+export const inputClasses: Record<InputVariants, InputClasses> = {
+  default: {
+    // <wind-keep strokeColor="gray-800" focusWithinStrokeColor="gray-800" interactiveColorsOnGroup/>
+    icon: 'gray-800',
+  },
+  active: {
+    // <wind-keep strokeColor="indigo-500" focusWithinStrokeColor="indigo-500" interactiveColorsOnGroup/>
+    icon: 'indigo-500',
+  },
+  valid: {
+    // <wind-keep strokeColor="jade-500" focusWithinStrokeColor="jade-500" interactiveColorsOnGroup/>
+    icon: 'jade-500',
+  },
+  invalid: {
+    // <wind-keep strokeColor="red-500" focusWithinStrokeColor="red-500" interactiveColorsOnGroup/>
+    icon: 'red-500',
+  },
+  warning: {
+    // <wind-keep strokeColor="gray-800" focusWithinStrokeColor="gray-800" interactiveColorsOnGroup/>
+    icon: 'gray-800',
+  },
+  disabled: {
+    // <wind-keep strokeColor="gray-600" focusWithinStrokeColor="gray-600" interactiveColorsOnGroup/>
+    icon: 'gray-600',
+  },
+} as const
+
+export const SizeClassesTable = {
+  '32': 'h-32px px-[12px] py-[6px] text-[14px]',
+  '40': 'h-40px px-[16px] py-[8px] text-[16px]',
+  '48': 'h-48px px-[16px] py-[12px] text-[16px]',
+} as const
+export type InputSizes = keyof typeof SizeClassesTable
+
+export const StaticClasses =
+  'border border-solid rounded rounded-[4px] flex items-center font-medium transition duration-150 '
+export const ResultStaticClass =
+  'whitespace-nowrap border-l-1 border-gray-100 ml-[16px] pl-[16px] '
+export const StaticInputClasses = 'clear-none w-[100%] '
+export const IconStaticClasses = 'mr-[8px] min-w-[16px] '
+export const ResetStaticClasses = 'ml-[8px] '
+
+export const DefaultVariant: keyof typeof VariantClassesTable = 'default'
+export const DefaultSize: keyof typeof SizeClassesTable = '40'
+
+export interface InputProps {
+  /**package
+   * Visual variant to display the button;
+   * It will pick colors for font, background and border.
+   */
+  variant?: keyof typeof VariantClassesTable
+  /**
+   * Size (height) of the button (in pixels)
+   */
+  size?: InputSizes
+  /**
+   * Is the button clickable and active?
+   * Note that `variant="disabled"` will also set this
+   */
+  disabled?: boolean
+  /**
+   * Replace the default left icon
+   */
+  customIcon?: React.FC<React.SVGProps<SVGSVGElement>>
+  /**
+   * Change handler for the text input field.
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  /**
+   * Click handler for the reset button.
+   * Button is only displayed when this is defined.
+   */
+  onReset?: React.MouseEventHandler<HTMLButtonElement>
+  /**
+   * Whether the input is meant for search
+   * and to auto-include the MagnifyingGlass icon.
+   */
+  isSearch?: boolean
+  /**
+   * Optional details for search results.
+   */
+  searchResults?: {
+    entity: string
+    match: number
+    total: number
+  }
+}
diff --git a/components/Input/constants/tsconfig.json b/components/Input/constants/tsconfig.json
new file mode 100644
index 000000000..a60a4d75a
--- /dev/null
+++ b/components/Input/constants/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/*.ts"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "types": []
+  }
+}
diff --git a/components/Input/react/CHANGELOG.md b/components/Input/react/CHANGELOG.md
new file mode 100644
index 000000000..bdcb6beaa
--- /dev/null
+++ b/components/Input/react/CHANGELOG.md
@@ -0,0 +1 @@
+# @cypress-design/react-input
diff --git a/components/Input/react/Input.rootstory.tsx b/components/Input/react/Input.rootstory.tsx
new file mode 100644
index 000000000..8120a219f
--- /dev/null
+++ b/components/Input/react/Input.rootstory.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+import Input from './Input'
+
+export default (options: { id?: string }) => {
+  const { id = 'foo', ...rest } = options
+  return <Input id={id} {...rest} />
+}
diff --git a/components/Input/react/Input.tsx b/components/Input/react/Input.tsx
new file mode 100644
index 000000000..fe6c09aa4
--- /dev/null
+++ b/components/Input/react/Input.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react'
+import clsx from 'clsx'
+import {
+  InputProps,
+  DefaultSize,
+  DefaultVariant,
+  SizeClassesTable,
+  VariantClassesTable,
+  IconStaticClasses,
+  ResetStaticClasses,
+  ResultStaticClass,
+  StaticClasses,
+  inputClasses,
+  StaticInputClasses,
+} from '@cypress-design/constants-input'
+import {
+  IconObjectMagnifyingGlass,
+  IconActionDeleteLarge,
+} from '@cypress-design/react-icon'
+
+export interface InputPropsJsx extends InputProps {
+  id: string
+  value?: string
+  className?: string
+}
+
+type ReactInputProps = InputPropsJsx & React.HTMLProps<HTMLInputElement>
+
+// tbd: what is a better way of allowing the <input/>
+//  to propagate its focus state to siblings?
+const usePropagateFocusProps = () => {
+  const [hasFocus, setHasFocus] = React.useState(false)
+  const enableFocusStyle = React.useCallback(() => setHasFocus(true), [])
+  const disableFocusStyle = React.useCallback(() => setHasFocus(false), [])
+  const propagateFocusProps = React.useMemo(() => {
+    return {
+      onFocus: enableFocusStyle,
+      onMouseEnter: enableFocusStyle,
+      onMouseOver: enableFocusStyle,
+      onBlur: disableFocusStyle,
+      onMouseLeave: disableFocusStyle,
+      onMouseOut: disableFocusStyle,
+    }
+  }, [enableFocusStyle, disableFocusStyle])
+  return {
+    propagateFocusProps,
+    hasFocus,
+  }
+}
+
+export const Input: React.FC<ReactInputProps> = ({
+  id,
+  className,
+  customIcon,
+  isSearch,
+  searchResults,
+  size = DefaultSize,
+  variant = DefaultVariant,
+  onReset,
+  onChange,
+  placeholder,
+  disabled,
+  value,
+  ...rest
+}) => {
+  const { propagateFocusProps, hasFocus } = usePropagateFocusProps()
+
+  const finalIsDisabled = disabled || variant === 'disabled'
+  const finalVariant = finalIsDisabled ? 'disabled' : variant
+
+  const variantClasses = inputClasses[finalVariant] ?? {}
+
+  const iconStrokeColor =
+    finalVariant !== 'default'
+      ? variantClasses.icon
+      : hasFocus
+      ? inputClasses.active.icon
+      : inputClasses.default.icon
+
+  const Icon = customIcon ?? isSearch ? IconObjectMagnifyingGlass : null
+
+  return (
+    <div
+      {...rest}
+      id={id}
+      className={clsx(
+        StaticClasses,
+        VariantClassesTable[finalVariant],
+        SizeClassesTable[size],
+        className
+      )}
+    >
+      {Icon && (
+        <Icon
+          className={IconStaticClasses}
+          strokeColor={iconStrokeColor}
+          data-cy="text-input--search-icon"
+        />
+      )}
+      <input
+        // unclear how to prevent the native [X] from showing
+        //  with tailwind, so only using "text" for now:
+        type="text" // tbd: support "search"
+        value={value}
+        disabled={finalIsDisabled}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={StaticInputClasses}
+        {...propagateFocusProps}
+      />
+      {onReset && (
+        <button type="button" className={ResetStaticClasses} onClick={onReset}>
+          <IconActionDeleteLarge strokeColor={iconStrokeColor} />
+        </button>
+      )}
+      {searchResults && (
+        <p data-cy="text-input--search-results" className={ResultStaticClass}>
+          {searchResults.match} of {searchResults.total} {searchResults.entity}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default Input
diff --git a/components/Input/react/InputReact.cy.tsx b/components/Input/react/InputReact.cy.tsx
new file mode 100644
index 000000000..d8c3510e8
--- /dev/null
+++ b/components/Input/react/InputReact.cy.tsx
@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+import * as React from 'react'
+import { mount } from 'cypress/react18'
+import InputStory from './Input.rootstory'
+import assertions from '../assertions'
+
+describe('Input', () => {
+  function mountStory(options: Parameters<typeof InputStory>[0] = {}) {
+    mount(<InputStory {...options} />)
+  }
+  assertions(mountStory)
+})
diff --git a/components/Input/react/ReadMe.md b/components/Input/react/ReadMe.md
new file mode 100644
index 000000000..b65506bb0
--- /dev/null
+++ b/components/Input/react/ReadMe.md
@@ -0,0 +1,94 @@
+# Input
+
+## Install
+
+```bash
+npm install @cypress-design/react-input
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-input
+```
+
+## Usage
+
+```ts
+import Input from '@cypress-design/react-input'
+```
+
+```jsx live
+import {
+  default as Input,
+  VariantClassesTable,
+  SizeClassesTable,
+} from '@cypress-design/react-input'
+
+const Contrast = ({ children }) => (
+  <div className="bg-white p-[2px] rounded">{children}</div>
+)
+
+export const InputComp = () => {
+  return (
+    <Contrast>
+      <Input
+        // size="32"
+        // className=""
+        // value={value}
+        // onChange={(event) => null}
+        // customIcon={IconComponentVar}
+        isSearch // adds MagnifyingGlass icon
+        onReset={() => console.log('reset...')}
+        placeholder="Search specs"
+        searchResults={{
+          match: 7,
+          total: 124,
+          entity: 'specs',
+        }}
+      />
+    </Contrast>
+  )
+}
+```
+
+## Possible variants
+
+```tsx live
+import {
+  default as Input,
+  SizeClassesTable,
+  VariantClassesTable,
+} from '@cypress-design/react-input'
+
+export default () => {
+  return (
+    <div className="flex flex-wrap justify-stretch gap-[8px]">
+      {Object.keys(VariantClassesTable).map((variant) => (
+        <div
+          className="px-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[375px]"
+          style={{
+            backgroundColor: variant === 'outline-dark' ? '#1a202c' : 'white',
+            color: variant === 'outline-dark' ? 'white' : 'black',
+          }}
+          key={variant}
+        >
+          <h3>{variant}</h3>
+          {Object.keys(SizeClassesTable).map((size) => {
+            return (
+              <div className="flex gap-[8px] items-center" key={size}>
+                {size}
+                <Input
+                  size={size}
+                  variant={variant}
+                  placeholder={'Placeholder'}
+                />
+              </div>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
diff --git a/components/Input/react/index.ts b/components/Input/react/index.ts
new file mode 100644
index 000000000..067923874
--- /dev/null
+++ b/components/Input/react/index.ts
@@ -0,0 +1,5 @@
+export { default } from './Input'
+export {
+  VariantClassesTable,
+  SizeClassesTable,
+} from '@cypress-design/constants-input'
diff --git a/components/Input/react/package.json b/components/Input/react/package.json
new file mode 100644
index 000000000..121623652
--- /dev/null
+++ b/components/Input/react/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@cypress-design/react-input",
+  "version": "0.0.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/index.d.ts",
+  "module": "./dist/index.es.mjs",
+  "main": "./dist/index.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "rollup -c ./rollup.config.mjs",
+    "build:types": "tsc --project ./tsconfig.build.json"
+  },
+  "dependencies": {
+    "@cypress-design/constants-input": "*",
+    "@cypress-design/react-icon": "*",
+    "clsx": "*"
+  },
+  "devDependencies": {
+    "@cypress-design/css": "*"
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/components/Input/react/rollup.config.mjs b/components/Input/react/rollup.config.mjs
new file mode 100644
index 000000000..a7bd5b69a
--- /dev/null
+++ b/components/Input/react/rollup.config.mjs
@@ -0,0 +1,3 @@
+import rootRollupConfig from '../../root.rollup.config.mjs'
+
+export default rootRollupConfig({ input: './index.ts' })
diff --git a/components/Input/react/tsconfig.build.json b/components/Input/react/tsconfig.build.json
new file mode 100644
index 000000000..d3d35c0f3
--- /dev/null
+++ b/components/Input/react/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.react.build.json",
+  "include": ["./Input.tsx", "./index.ts"],
+  "compilerOptions": {
+    "sourceRoot": "./",
+    "outDir": "dist"
+  }
+}
diff --git a/components/Input/react/tsconfig.json b/components/Input/react/tsconfig.json
new file mode 100644
index 000000000..1b2a34ec1
--- /dev/null
+++ b/components/Input/react/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.react.json",
+	"compilerOptions": {
+    "rootDir": "../../../"
+  },
+  "include": ["*.tsx", "*.ts", "../*.ts", "../../../cypress/support/*.ts"]
+}
diff --git a/components/Input/vue/CHANGELOG.md b/components/Input/vue/CHANGELOG.md
new file mode 100644
index 000000000..1f8267877
--- /dev/null
+++ b/components/Input/vue/CHANGELOG.md
@@ -0,0 +1 @@
+# @cypress-design/vue-input
diff --git a/components/Input/vue/Input.rootstory.tsx b/components/Input/vue/Input.rootstory.tsx
new file mode 100644
index 000000000..bbc507de6
--- /dev/null
+++ b/components/Input/vue/Input.rootstory.tsx
@@ -0,0 +1,6 @@
+import Input from './Input.vue'
+
+export default (options: { id?: string }) => {
+  const { id = 'foo', ...rest } = options
+  return <Input id={id} {...rest} />
+}
diff --git a/components/Input/vue/Input.vue b/components/Input/vue/Input.vue
new file mode 100644
index 000000000..ebcb4be25
--- /dev/null
+++ b/components/Input/vue/Input.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import {
+  InputProps,
+  DefaultSize,
+  DefaultVariant,
+  SizeClassesTable,
+  VariantClassesTable,
+  IconStaticClasses,
+  ResetStaticClasses,
+  ResultStaticClass,
+  StaticClasses,
+  inputClasses,
+  StaticInputClasses,
+} from '@cypress-design/constants-input'
+import {
+  IconObjectMagnifyingGlass,
+  IconActionDeleteLarge,
+} from '@cypress-design/vue-icon'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: InputProps['variant']
+    disabled?: boolean
+    value?: string
+    size?: InputProps['size']
+    placeholder?: string
+    customIcon?: any
+    isSearch?: boolean
+    searchResults?: InputProps['searchResults']
+    clearable?: boolean
+  }>(),
+  {
+    variant: DefaultVariant,
+    disabled: false,
+    value: '',
+    size: DefaultSize,
+    isSearch: false,
+  }
+)
+
+const finalIsDisabled = computed(() => {
+  return props.disabled || props.variant === 'disabled'
+})
+
+const finalVariant = computed(() => {
+  return finalIsDisabled.value ? 'disabled' : props.variant
+})
+
+const emit = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'reset'): void
+}>()
+
+const Icon = computed(() =>
+  props.customIcon ?? props.isSearch ? IconObjectMagnifyingGlass : null
+) as any
+</script>
+
+<template>
+  <div
+    :class="[
+      StaticClasses,
+      VariantClassesTable[finalVariant],
+      SizeClassesTable[size],
+      'group',
+    ]"
+  >
+    <Icon
+      v-if="Icon"
+      :class="IconStaticClasses"
+      :strokeColor="inputClasses[finalVariant].icon"
+      :focus-within-stroke-color="
+        finalVariant === 'default' ? inputClasses.active.icon : undefined
+      "
+      data-cy="text-input--search-icon"
+      interactive-colors-on-group
+    />
+    <input
+      type="text"
+      :value="value"
+      :disabled="finalIsDisabled"
+      :class="StaticInputClasses"
+      v-bind="$attrs"
+    />
+
+    <button
+      v-if="clearable && value"
+      type="button"
+      :class="ResetStaticClasses"
+      @click="emit('reset')"
+    >
+      <IconActionDeleteLarge
+        :strokeColor="inputClasses.default.icon"
+        :focus-within-stroke-color="inputClasses[finalVariant].icon"
+        interactive-colors-on-group
+      />
+    </button>
+
+    <p
+      v-if="searchResults"
+      data-cy="text-input--search-results"
+      :class="ResultStaticClass"
+    >
+      {{ searchResults.match }} of {{ searchResults.total }}
+      {{ searchResults.entity }}
+    </p>
+  </div>
+</template>
diff --git a/components/Input/vue/InputVue.cy.tsx b/components/Input/vue/InputVue.cy.tsx
new file mode 100644
index 000000000..7e43ecabb
--- /dev/null
+++ b/components/Input/vue/InputVue.cy.tsx
@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/vue'
+import assertions from '../assertions'
+import InputStory from './Input.rootstory'
+
+describe('<Input/>', () => {
+  function mountStory(options: Parameters<typeof InputStory>[0] = {}) {
+    mount(() => <InputStory {...options} />)
+  }
+  // assertions(mountStory)
+})
diff --git a/components/Input/vue/ReadMe.md b/components/Input/vue/ReadMe.md
new file mode 100644
index 000000000..0aa7f18e6
--- /dev/null
+++ b/components/Input/vue/ReadMe.md
@@ -0,0 +1,36 @@
+# Input
+
+## Install
+
+```bash
+npm install @cypress-design/vue-input
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-input
+```
+
+## Usage
+
+```js
+import Input from '@cypress-design/vue-input'
+```
+
+```vue live
+<template>
+  <div class="bg-white p-1 rounded">
+    <Input
+      variant="invalid"
+      isSearch
+      placeholder="Search specs"
+      :searchResults="{
+        match: 7,
+        total: 124,
+        entity: 'specs',
+      }"
+    />
+  </div>
+</template>
+```
diff --git a/components/Input/vue/index.ts b/components/Input/vue/index.ts
new file mode 100644
index 000000000..2033ab143
--- /dev/null
+++ b/components/Input/vue/index.ts
@@ -0,0 +1,5 @@
+export { default } from './Input.vue'
+export {
+  VariantClassesTable,
+  SizeClassesTable,
+} from '@cypress-design/constants-input'
diff --git a/components/Input/vue/package.json b/components/Input/vue/package.json
new file mode 100644
index 000000000..cf1aeb708
--- /dev/null
+++ b/components/Input/vue/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@cypress-design/vue-input",
+  "version": "0.0.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/vue/index.d.ts",
+  "module": "./dist/index.es.mjs",
+  "main": "./dist/index.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "yarn vite build",
+    "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
+  },
+  "dependencies": {
+    "@cypress-design/vue-icon": "*",
+    "@cypress-design/constants-input": "*"
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/components/Input/vue/tsconfig.build.json b/components/Input/vue/tsconfig.build.json
new file mode 100644
index 000000000..428a301b1
--- /dev/null
+++ b/components/Input/vue/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.vue.json",
+  "include": ["./*.vue", "./index.ts"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "composite": false
+  }
+}
diff --git a/components/Input/vue/tsconfig.json b/components/Input/vue/tsconfig.json
new file mode 100644
index 000000000..ff6953fa2
--- /dev/null
+++ b/components/Input/vue/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../../tsconfig.vue.json",
+	"compilerOptions": {
+    "rootDir": "../../../"
+  },
+  "exclude": ["vite.config.ts"],
+  "include": [
+    "*.vue",
+    "*.ts",
+    "*.tsx",
+    "../*.ts",
+    "../../../cypress/support/*.ts"
+  ]
+}
diff --git a/components/Input/vue/vite.config.ts b/components/Input/vue/vite.config.ts
new file mode 100644
index 000000000..47fe70ae1
--- /dev/null
+++ b/components/Input/vue/vite.config.ts
@@ -0,0 +1,7 @@
+import * as path from 'path'
+import generateViteConfig from '../../root.vite.config'
+
+export default generateViteConfig({
+  entry: path.resolve(__dirname, './index.ts'),
+  name: 'Input',
+})
diff --git a/package.json b/package.json
index ebeef36ab..8bf33e131 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "rollup": "^3.21.6",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "turbo": "^1.9.4",
+    "turbo": "^1.9.6",
     "typescript": "5.0.4",
     "universal-cookie": "^4.0.4",
     "vite": "4.3.5",
diff --git a/yarn.lock b/yarn.lock
index 4ce015f85..32e83f838 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10122,47 +10122,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.9.4.tgz#3f40cba2dcc13011f4c51101ba03f4c1aa511daf"
-  integrity sha512-kCmDmxyUWWI+BstTZQKNM87UbNx40C0ZHUTFqs9tmeH7d5+gA2QhqrSoBuwQYw7YYNLpbkqu1ObbppsUlIFPdQ==
-
-turbo-darwin-arm64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.9.4.tgz#257e67438033d1bfb75650b5ca8664d0a00e0ccb"
-  integrity sha512-Of64jMEaDDHx0dzU7RwdOuh1lP021vtQun9wmEHhT0Hk/TQF+kDCywoHcY7R5nlSRcssFjysVyhCeZW6CkWrrA==
-
-turbo-linux-64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.9.4.tgz#a4d7a06b8b786144d3c967a8f647561a71d8057a"
-  integrity sha512-kajvUnXlUNtgVzLW3Y/RoHrC64G+G0Ky/o1F+oP6QK/T85H8NwNHXq2F6hyIrZPNGbKpPgpetuQ1waIibxJ0rA==
-
-turbo-linux-arm64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.9.4.tgz#5426bd72ef2a80cad390ecf4220779824faab41f"
-  integrity sha512-11P9Y8MoimqUzib3SU3md4g1loLF0FRHpYCbPzUTWPT3beOcdM2nop2u/yFHyBnbSxz1rTWczRJPnNoAki0B/Q==
-
-turbo-windows-64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.9.4.tgz#b6458e3f715f0b0ab0b1bf1ded3ed6f2a8e0f1f9"
-  integrity sha512-2tFcFhuqs1c1DGFAk2wjU0TXrOXKoPdma9vxrTVdwvtz5Nc8XPF8RNW+1jbmRjpumGUkXou6Pe973GSvPjvD5w==
-
-turbo-windows-arm64@1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.9.4.tgz#d4959a8b81dc5c3561b8e22355ab74b05d47f803"
-  integrity sha512-wJfEwUyWXxn6VKD2Vbycke6cm99gJ0llkr9gUnbR06eaRu1TiLY24FcFqN95/wftp0n5nne7b6K7Wz1TLh1fJQ==
-
-turbo@^1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.9.4.tgz#d9a3e350767dc894a5f5b427144d20d435c22032"
-  integrity sha512-PqhlMCmu6sOqcVswt1tYL0TV/O0uQ8kUZWfmlEl0EHPusc2R3nzg7KVXrZbXTHXzQH5HE2oJm9iUI0mYz31i7Q==
+turbo-darwin-64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.9.6.tgz#fb391943b8b4c5e72cd6aaebc57d177a26b5d98e"
+  integrity sha512-9jmxyCAcPrJiPD/EmtK2tObrPGblmyORCgNgtcw1iozcfC7kqungWTfbnHrvTNUfUmVhH0sA3BGzshpuslbQHg==
+
+turbo-darwin-arm64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.9.6.tgz#852aa7c97f5688082df06607cbdf7b9623eff782"
+  integrity sha512-5f8ajEi8mOdAZ0AXavu/TzkHGEUi7tw+paefff7KK+XTUrdeyTlf8ULiTI+r97uH1jsYeTeL4JPu9IsEx+bL6g==
+
+turbo-linux-64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.9.6.tgz#c716247e27a9e8a53ab240272cd189bf0d8a6f08"
+  integrity sha512-UrCDMl2Nqd/kxNEJonqvDg8nmZU4UggVQTmqcdYyuOiCA3H98jxggQqZh1VGeF23XDbCWHSQjnbkLeoUvQJWKw==
+
+turbo-linux-arm64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.9.6.tgz#0c4aad0a502e79494d13775a81348d17bb9f581c"
+  integrity sha512-oOxAT6lNiMpYVZPWzFNsUvC2LQgKYyH4aBnkeoBnjuAUk8BK5AhUWSWl4QlfTcBWW4LnjDPeZQKrbnxvHhPVsw==
+
+turbo-windows-64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.9.6.tgz#8852355f0ab51582cb85ba1393fe6a9b91773ee4"
+  integrity sha512-65UxLL1vb5RItzJYNerO5c+yPMzSnD+GvJxfBZIvAwSnb+4ulhPRHzQOYinVq4PZ2DosBZOorWPRf97POmhvog==
+
+turbo-windows-arm64@1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.9.6.tgz#971e33503388ae53a6af7f4356ec579c604ef5f6"
+  integrity sha512-aF9VzYT+vaKNbZGDccN7AYrNhph4gr6yOFN7GtTr777IwS5FGW7evku7RScsua5r2HwVKvBO2WjyadpbXuoOOQ==
+
+turbo@^1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.9.6.tgz#48924ba8afba760b5c4ff6a6e1c48129df338c38"
+  integrity sha512-mLbCIAYNbSm60kVhBiAr+YA1BYpPObS/y7rqw1hjh36ZdJDp35lUSeqdBs6oGt0Y4hnmN4ZeIXu8zMVRR03/vw==
   optionalDependencies:
-    turbo-darwin-64 "1.9.4"
-    turbo-darwin-arm64 "1.9.4"
-    turbo-linux-64 "1.9.4"
-    turbo-linux-arm64 "1.9.4"
-    turbo-windows-64 "1.9.4"
-    turbo-windows-arm64 "1.9.4"
+    turbo-darwin-64 "1.9.6"
+    turbo-darwin-arm64 "1.9.6"
+    turbo-linux-64 "1.9.6"
+    turbo-linux-arm64 "1.9.6"
+    turbo-windows-64 "1.9.6"
+    turbo-windows-arm64 "1.9.6"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"