diff --git a/.changeset/selfish-kings-clap.md b/.changeset/selfish-kings-clap.md
new file mode 100644
index 0000000000..92e9ab27bd
--- /dev/null
+++ b/.changeset/selfish-kings-clap.md
@@ -0,0 +1,6 @@
+---
+"@heroui/date-input": patch
+"@heroui/theme": patch
+---
+
+add 'outside-top' prop to input
diff --git a/apps/docs/content/components/input/label-placements.raw.jsx b/apps/docs/content/components/input/label-placements.raw.jsx
index 428dc662bb..29be3df06c 100644
--- a/apps/docs/content/components/input/label-placements.raw.jsx
+++ b/apps/docs/content/components/input/label-placements.raw.jsx
@@ -1,7 +1,7 @@
 import {Input} from "@heroui/react";
 
 export default function App() {
-  const placements = ["inside", "outside", "outside-left"];
+  const placements = ["inside", "outside", "outside-left", "outside-top"];
 
   return (
     <div className="flex flex-col gap-4">
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index d11c705446..751f4f9234 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -75,12 +75,16 @@ the end of the label and the input will be required.
 
 ### Label Placements
 
-You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
+You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside`, `outside-left` or `outside-top`.
 
 <CodeDemo title="Label Placements" files={inputContent.labelPlacements} />
 
 > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default.
 
+> **Note**: If the `labelPlacement` is `outside`, `label` is outside only when a placeholder is provided. 
+
+> **Note**: If the `labelPlacement` is `outside-top` or `outside-left`, `label` is outside even if a placeholder is not provided.
+
 ### Password Input
 
 You can use the `type` property to change the input type to `password`.
diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
index d6d646dfd5..718cbad622 100644
--- a/packages/components/input/src/input.tsx
+++ b/packages/components/input/src/input.tsx
@@ -17,6 +17,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     labelPlacement,
     hasHelper,
     isOutsideLeft,
+    isOutsideTop,
     shouldLabelBeOutside,
     errorMessage,
     isInvalid,
@@ -82,7 +83,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
       return (
         <div {...getMainWrapperProps()}>
           <div {...getInputWrapperProps()}>
-            {!isOutsideLeft ? labelContent : null}
+            {!isOutsideLeft && !isOutsideTop ? labelContent : null}
             {innerWrapper}
           </div>
           {helperWrapper}
@@ -115,7 +116,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      {isOutsideLeft ? labelContent : null}
+      {isOutsideLeft || isOutsideTop ? labelContent : null}
       {mainWrapper}
     </Component>
   );
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
index 96ec39906b..33c693fe78 100644
--- a/packages/components/input/src/use-input.ts
+++ b/packages/components/input/src/use-input.ts
@@ -1,13 +1,7 @@
 import type {InputVariantProps, SlotsToClasses, InputSlots} from "@heroui/theme";
 import type {AriaTextFieldOptions} from "@react-aria/textfield";
 
-import {
-  HTMLHeroUIProps,
-  mapPropsVariants,
-  PropGetter,
-  useLabelPlacement,
-  useProviderContext,
-} from "@heroui/system";
+import {HTMLHeroUIProps, mapPropsVariants, PropGetter, useProviderContext} from "@heroui/system";
 import {useSafeLayoutEffect} from "@heroui/use-safe-layout-effect";
 import {AriaTextFieldProps} from "@react-types/textfield";
 import {useFocusRing} from "@react-aria/focus";
@@ -233,10 +227,14 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
 
   const isInvalid = validationState === "invalid" || isAriaInvalid;
 
-  const labelPlacement = useLabelPlacement({
-    labelPlacement: originalProps.labelPlacement,
-    label,
-  });
+  // TODO: not using useLabelPlacement because `outside-top` doesn't support in other components.
+  const labelPlacement = useMemo<InputVariantProps["labelPlacement"]>(() => {
+    if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+      return "outside";
+    }
+
+    return originalProps.labelPlacement ?? "inside";
+  }, [originalProps.labelPlacement, label]);
 
   const errorMessage =
     typeof props.errorMessage === "function"
@@ -247,17 +245,26 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const hasPlaceholder = !!props.placeholder;
   const hasLabel = !!label;
   const hasHelper = !!description || !!errorMessage;
-  const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
+  const isOutsideLeft = labelPlacement === "outside-left";
+  const isOutsideTop = labelPlacement === "outside-top";
+
+  const shouldLabelBeOutside =
+    // label is outside only when some placeholder is there
+    labelPlacement === "outside" ||
+    // label is outside regardless of placeholder
+    isOutsideLeft ||
+    isOutsideTop;
+
   const shouldLabelBeInside = labelPlacement === "inside";
   const isPlaceholderShown = domRef.current
     ? (!domRef.current.value || domRef.current.value === "" || !inputValue || inputValue === "") &&
       hasPlaceholder
     : false;
-  const isOutsideLeft = labelPlacement === "outside-left";
 
   const hasStartContent = !!startContent;
   const isLabelOutside = shouldLabelBeOutside
-    ? labelPlacement === "outside-left" ||
+    ? isOutsideLeft ||
+      isOutsideTop ||
       hasPlaceholder ||
       (labelPlacement === "outside" && hasStartContent)
     : false;
@@ -531,6 +538,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     hasStartContent,
     isLabelOutside,
     isOutsideLeft,
+    isOutsideTop,
     isLabelOutsideAsPlaceholder,
     shouldLabelBeOutside,
     shouldLabelBeInside,
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 22dd53fbbd..b876f3e5e2 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -50,7 +50,7 @@ export default {
       control: {
         type: "select",
       },
-      options: ["inside", "outside", "outside-left"],
+      options: ["inside", "outside", "outside-left", "outside-top"],
     },
     isDisabled: {
       control: {
@@ -175,15 +175,16 @@ const LabelPlacementTemplate = (args) => (
   <div className="w-full flex flex-col items-center gap-12">
     <div className="flex flex-col gap-3">
       <h3>Without placeholder</h3>
-      <div className="w-full max-w-xl flex flex-row items-end gap-4">
+      <div className="w-full flex flex-row items-end gap-4">
         <Input {...args} description="inside" />
         <Input {...args} description="outside" labelPlacement="outside" />
         <Input {...args} description="outside-left" labelPlacement="outside-left" />
+        <Input {...args} description="outside-top" labelPlacement="outside-top" />
       </div>
     </div>
     <div className="flex flex-col gap-3">
       <h3>With placeholder</h3>
-      <div className="w-full max-w-xl flex flex-row items-end gap-4">
+      <div className="w-full flex flex-row items-end gap-4">
         <Input {...args} description="inside" placeholder="Enter your email" />
         <Input
           {...args}
@@ -197,6 +198,12 @@ const LabelPlacementTemplate = (args) => (
           labelPlacement="outside-left"
           placeholder="Enter your email"
         />
+        <Input
+          {...args}
+          description="outside-top"
+          labelPlacement="outside-top"
+          placeholder="Enter your email"
+        />
       </div>
     </div>
   </div>
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 17f5f1fec7..daabfedf06 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -178,6 +178,10 @@ const input = tv({
         mainWrapper: "flex flex-col",
         label: "relative text-foreground pe-2 ps-2 pointer-events-auto",
       },
+      "outside-top": {
+        mainWrapper: "flex flex-col",
+        label: "relative text-foreground pb-2 pointer-events-auto",
+      },
       inside: {
         label: "cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0",