diff --git a/packages/react/components/Input.tsx b/packages/react/components/Input.tsx
new file mode 100644
index 0000000..c1785eb
--- /dev/null
+++ b/packages/react/components/Input.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { VariantProps, vcn } from "../shared";
+
+const inputColors = {
+  background: {
+    default: "bg-neutral-50 dark:bg-neutral-900",
+    hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+    invalid:
+      "invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
+    invalidHover:
+      "hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
+  },
+  border: {
+    default: "border-neutral-400 dark:border-neutral-600",
+    invalid:
+      "invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
+  },
+  ring: {
+    default: "ring-transparent focus-within:ring-current",
+    invalid:
+      "invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
+  },
+};
+
+const [inputVariant, resolveInputVariantProps] = vcn({
+  base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
+  variants: {
+    unstyled: {
+      true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
+      false: "",
+    },
+  },
+  defaults: {
+    unstyled: false,
+  },
+});
+
+interface InputFrameProps
+  extends VariantProps<typeof inputVariant>,
+    React.ComponentPropsWithoutRef<"label"> {
+  children?: React.ReactNode;
+}
+
+const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsUnsafe] = resolveInputVariantProps(props);
+    const { children, ...otherPropsSafe } = otherPropsUnsafe;
+
+    return (
+      <label
+        ref={ref}
+        className={`group/input-frame ${inputVariant(variantProps)}`}
+        {...otherPropsSafe}
+      >
+        {children}
+      </label>
+    );
+  }
+);
+
+interface InputProps
+  extends VariantProps<typeof inputVariant>,
+    React.ComponentPropsWithoutRef<"input"> {
+  type: Exclude<
+    React.InputHTMLAttributes<HTMLInputElement>["type"],
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "file"
+    | "radio"
+    | "range"
+    | "reset"
+    | "image"
+    | "submit"
+    | "time"
+  >;
+  invalid?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const [variantProps, otherPropsUnsafe] = resolveInputVariantProps(props);
+  const { type, invalid, ...otherPropsSafe } = otherPropsUnsafe;
+
+  const innerRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    if (innerRef && innerRef.current) {
+      innerRef.current.setCustomValidity(invalid ?? "");
+    }
+  }, [invalid]);
+
+  return (
+    <input
+      type={type}
+      ref={(el) => {
+        innerRef.current = el;
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref) {
+          ref.current = el;
+        }
+      }}
+      className={inputVariant(variantProps)}
+      {...otherPropsSafe}
+    />
+  );
+});
+
+export { InputFrame, Input };
diff --git a/packages/react/stories/Input.stories.tsx b/packages/react/stories/Input.stories.tsx
new file mode 100644
index 0000000..591aeb2
--- /dev/null
+++ b/packages/react/stories/Input.stories.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Input, InputFrame } from "../components/Input";
+import { Button } from "../components/Button";
+
+export default {
+  title: "React/Input",
+};
+
+export const TextInput = () => {
+  return <Input type="text" placeholder="Type Here..." />;
+};
+
+export const PasswordInput = () => {
+  return <Input type="password" />;
+};
+
+export const InvalidInput = () => {
+  return <Input type="text" invalid="Invalid" />;
+};
+
+export const DisabledInput = () => {
+  return <Input type="text" disabled />;
+};
+
+export const InputWithFrame = () => {
+  const [passwordState, setPasswordState] = React.useState({ visible: false });
+
+  return (
+    <InputFrame>
+      <Input type={passwordState.visible ? "text" : "password"} unstyled />
+      <Button
+        preset="default"
+        size="icon"
+        onClick={() =>
+          setPasswordState((prev) => ({ ...prev, visible: !prev.visible }))
+        }
+      >
+        {passwordState.visible ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 17.5c-3.8 0-7.2-2.1-8.8-5.5H1c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5h-2.2c-1.6 3.4-5 5.5-8.8 5.5"
+            ></path>
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
+            ></path>
+          </svg>
+        )}
+      </Button>
+    </InputFrame>
+  );
+};
+
+export const InputWithFrameInvalid = () => {
+  const [passwordState, setPasswordState] = React.useState({ visible: false });
+
+  return (
+    <InputFrame>
+      <Input
+        type={passwordState.visible ? "text" : "password"}
+        unstyled
+        invalid="Invalid"
+      />
+      <Button
+        preset="default"
+        size="icon"
+        onClick={() =>
+          setPasswordState((prev) => ({ ...prev, visible: !prev.visible }))
+        }
+        background="error"
+        border="error"
+      >
+        {passwordState.visible ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 17.5c-3.8 0-7.2-2.1-8.8-5.5H1c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5h-2.2c-1.6 3.4-5 5.5-8.8 5.5"
+            ></path>
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
+            ></path>
+          </svg>
+        )}
+      </Button>
+    </InputFrame>
+  );
+};