feat(input): add outside-top prop

.changeset/little-crabs-destroy.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/input": major
+"@nextui-org/theme": patch
+---
+
+Fixing Issue 3058. Initially, you cannot present label outside the input component if there is no placeholder. To fix this, I have added a "outside-top" prop which displays the label outside regardless of the placeholder, just like "outside-left" prop.

apps/docs/content/components/input/label-placements.ts

@@ -5,6 +5,7 @@ export default function App() {
     "inside",
     "outside",
     "outside-left",
+    "outside-top"
   ];
 
   return (

apps/docs/content/docs/components/input.mdx

@@ -75,7 +75,7 @@ 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} />
 

packages/components/input/src/input.tsx

@@ -17,6 +17,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     labelPlacement,
     hasHelper,
     isOutsideLeft,
+    isOutsideTop,
     shouldLabelBeOutside,
     errorMessage,
     isInvalid,
@@ -48,9 +49,13 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     return (
       <div {...getHelperWrapperProps()}>
         {isInvalid && errorMessage ? (
-          <div {...getErrorMessageProps()}>{errorMessage}</div>
+          <div className="bg-green-500" {...getErrorMessageProps()}>
+            {errorMessage}
+          </div>
         ) : description ? (
-          <div {...getDescriptionProps()}>{description}</div>
+          <div className="bg-green-500" {...getDescriptionProps()}>
+            {description}
+          </div>
         ) : null}
       </div>
     );
@@ -66,7 +71,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
 
   const innerWrapper = useMemo(() => {
     return (
-      <div {...getInnerWrapperProps()}>
+      <div className="bg-yellow-700" {...getInnerWrapperProps()}>
         {startContent}
         <input {...getInputProps()} />
         {end}
@@ -77,9 +82,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
   const mainWrapper = useMemo(() => {
     if (shouldLabelBeOutside) {
       return (
-        <div {...getMainWrapperProps()}>
+        <div className="bg-pink-600" {...getMainWrapperProps()}>
           <div {...getInputWrapperProps()}>
-            {!isOutsideLeft ? labelContent : null}
+            {!isOutsideLeft && !isOutsideTop ? labelContent : null}
             {innerWrapper}
           </div>
           {helperWrapper}
@@ -89,7 +94,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
 
     return (
       <>
-        <div {...getInputWrapperProps()}>
+        <div className="bg-blue-900" {...getInputWrapperProps()}>
           {labelContent}
           {innerWrapper}
         </div>
@@ -112,7 +117,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      {isOutsideLeft ? labelContent : null}
+      {isOutsideLeft || isOutsideTop ? labelContent : null}
       {mainWrapper}
     </Component>
   );

packages/components/input/src/use-input.ts

@@ -250,22 +250,34 @@ 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 shouldLabelBeOutside =
+    labelPlacement === "outside" ||
+    labelPlacement === "outside-left" ||
+    labelPlacement === "outside-top";
   const shouldLabelBeInside = labelPlacement === "inside";
   const isPlaceholderShown = domRef.current
     ? (!domRef.current.value || domRef.current.value === "" || !inputValue || inputValue === "") &&
       hasPlaceholder
     : false;
+
   const isOutsideLeft = labelPlacement === "outside-left";
+  const isOutsideTop = labelPlacement === "outside-top";
 
   const hasStartContent = !!startContent;
+
+  /*
+  outside -> label is outside only when some placeholder is there
+  outside-top, outside-left-> label is outside regardless of placeholder
+*/
   const isLabelOutside = shouldLabelBeOutside
     ? labelPlacement === "outside-left" ||
+      labelPlacement === "outside-top" ||
       hasPlaceholder ||
       (labelPlacement === "outside" && hasStartContent)
     : false;
-  const isLabelOutsideAsPlaceholder =
-    labelPlacement === "outside" && !hasPlaceholder && !hasStartContent;
+  const isLabelOutsideAsPlaceholder = labelPlacement === "outside" && !hasPlaceholder;
+  // &&
+  // !hasStartContent;
 
   const slots = useMemo(
     () =>
@@ -523,6 +535,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     hasStartContent,
     isLabelOutside,
     isOutsideLeft,
+    isOutsideTop,
     isLabelOutsideAsPlaceholder,
     shouldLabelBeOutside,
     shouldLabelBeInside,

packages/components/input/stories/input.stories.tsx

@@ -49,7 +49,7 @@ export default {
       control: {
         type: "select",
       },
-      options: ["inside", "outside", "outside-left"],
+      options: ["inside", "outside", "outside-left", "outside-top"],
     },
     isDisabled: {
       control: {
@@ -178,6 +178,7 @@ const LabelPlacementTemplate = (args) => (
         <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">
@@ -196,6 +197,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>

packages/core/theme/src/components/input.ts

@@ -170,6 +170,12 @@ const input = tv({
       outside: {
         mainWrapper: "flex flex-col",
       },
+      "outside-top": {
+        base: "flex-col items-center flex-nowrap data-[has-helper=true]:items-start",
+        inputWrapper: "flex-1",
+        mainWrapper: "flex flex-col",
+        label: "relative text-foreground pb-2",
+      },
       "outside-left": {
         base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         inputWrapper: "flex-1",