[BUG] - Input Alignment and classNames Styling When Using label in Input Component

drokbers commented 5 months ago

NextUI Version

2.2.10

Describe the bug

I am experiencing two interconnected issues with the Input component from @nextui-org/react. Firstly, when a label is used, the input's text alignment is off, with the input text appearing higher up, closer to the label, rather than being vertically centered. This misalignment impacts the visual harmony and usability of the input field.

While attempting to address this alignment issue by adjusting padding and margin through the classNames prop, I discovered that these styles are not applied to the input when a label is present. Removing the label makes the custom styles effective, which indicates that the presence of a label somehow interferes with the application of custom styles specified in classNames.

I tried for both 2.1.13 and 2.2.10 and have the same problem.

My Code:

<Input
  onChange={handleInputChange}
  name="min_salary"
  label="Min Salary"
  className="w-full md:w-custom50"
  classNames={{
    input: "outline-none focus:ring-0 focus:outline-none",   // pt or mp is not working in here if there's label
  }}
  value={values?.min_salary?.toString()}
  placeholder="0.00"
  startContent={
    <div className="pointer-events-none flex items-center">
      <span className="text-default-400 text-small">$</span>
    </div>
  }
  endContent={
    <div className="flex items-center outline-none focus:ring-0 focus:outline-none">
      <select
        className="outline-none focus:ring-0 focus:outline-none border-0 bg-transparent text-default-400 text-small"
        id="currency"
        name="currency"
        value={values?.currency}
        onChange={handleInputChange}
      >
        <option>USD</option>
        <!-- Additional options -->
      </select>
    </div>
  }
  type="number"
/>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1) Use the Input component with the label and classNames props. 2)Observe the vertical alignment issue of the input text, which does not center properly when a label is used. 3)Apply custom styles such as padding or margin to the input key within the classNames object to correct the alignment. 4)Notice that the custom styles do not affect the input field as long as the label prop is present. 5)Remove the label prop and observe that both the alignment looks better and the custom styles apply correctly.

Expected behavior

The input text should remain vertically centered within the input field, even when a label is present.
Custom styles specified through the classNames prop should be applied to the input element, regardless of the presence of a label.