[BUG] - Label of Input of type File, never goes inside

[templar-ajay]

NextUI Version

14.2.15

Describe the bug

The Input component property labelPlacement="inside" is not working as expected for with propertytype="file"

Below is the code to reproduce the issue

<Input
                  startContent={
                    <>
                      <BookImage className="text-muted-foreground" size={18} />
                    </>
                  }
                  //   classNames={{
                  //     base: "!mt-0",
                  //     mainWrapper: "h-full pt-0",
                  //     inputWrapper: "pt-8 pb-2 h-full",
                  //     label: "mt-5 ml-3 text-xs",
                  //   }}
                  type="file"
                  accept="image/png, image/jpeg, image/jpg"
                  variant="flat"
                  label="Cover Image"
                  placeholder="Cover Image"
                  labelPlacement="inside"
                />

I have created a temporary fix for it.
In the code above if we uncomment the classNames attribute the label appears inside the component as it should be when the labelPlacement="inside" is set on the Input Component

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<Input
                  startContent={
                    <>
                      <BookImage className="text-muted-foreground" size={18} />
                    </>
                  }
                  //   classNames={{
                  //     base: "!mt-0",
                  //     mainWrapper: "h-full pt-0",
                  //     inputWrapper: "pt-8 pb-2 h-full",
                  //     label: "mt-5 ml-3 text-xs",
                  //   }}
                  type="file"
                  accept="image/png, image/jpeg, image/jpg"
                  variant="flat"
                  label="Cover Image"
                  placeholder="Cover Image"
                  labelPlacement="inside"
                />

Expected behavior

The Label should appear inside the Component when the Input component property labelPlacement="inside" is set with another property type="file"
It may work fine once when we change the input type from text to file but after reloading the web page, the label is placed outside the component.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1731 [BUG] - Label of Input type File is never inside

[wingkwong]

From the source code, if the label placement is inside, it will throw Input with file type doesn't support inside label. Converting to outside .... Not sure the reason tho. Need to check.

[templar-ajay]

From the source code, if the label placement is inside, it will throw Input with file type doesn't support inside label. Converting to outside .... Not sure the reason tho. Need to check.

Thank You for addressing the issue. I'm sure you can fix it 💪🏻