diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss
new file mode 100644
index 0000000..87355ad
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.scss
@@ -0,0 +1,23 @@
+.c__input {
+  height: 2rem;
+  padding: 0 14px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px var(--c--theme--colors--greyscale-300) solid;
+  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  color: var(--c--theme--colors--greyscale-800);
+  font-size: var(--c--theme--font--sizes--m);
+
+  &:focus {
+    outline: 0;
+    border: 1px var(--c--theme--colors--greyscale-500) solid;
+  }
+
+  &--medium {
+    min-width: 150px;
+  }
+
+  &--nano {
+    min-width: 10px;
+  }
+}
\ No newline at end of file
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
new file mode 100644
index 0000000..14846cc
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Input } from "components/Forms/Input/index";
+
+export default {
+  title: "Components/Forms (WIP)/Input",
+  component: Input,
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => (
+  <Input {...args} aria-label="Input" />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultValue: "Hello world",
+};
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
new file mode 100644
index 0000000..df84fc9
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -0,0 +1,11 @@
+import React, { InputHTMLAttributes } from "react";
+
+type Props = InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = ({ className, ...props }: Props) => {
+  const classes = ["c__input"];
+  if (className) {
+    classes.push(className);
+  }
+  return <input type="text" className={classes.join(" ")} {...props} />;
+};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 76dbdf1..0054f81 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -1,6 +1,7 @@
 @import "cunningham-tokens";
 @import '@openfun/cunningham-tokens/default-tokens';
 @import './components/Button';
+@import './components/Forms/Input';
 
 * {
   font-family: var(--c--theme--font--families--base);