[BUG] - Input variant="bordered" with labelPlacement="outside" causes error message overflow

[Aryan-mor]

trafficstars

HeroUI Version

2.7.6

Describe the bug

When using the <Input /> component with:

variant="bordered"

labelPlacement="outside"

a long errorMessage that spans more than one line

The error message overflows and overlaps with other components or label text.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the <Input /> component with variant="bordered" and labelPlacement="outside".
2. Pass a long error message through the errorMessage prop that spans multiple lines.
3. Make sure isInvalid={true} is set so the error is shown.
4. Observe the rendering: the error message overflows and does not properly wrap under the input.

<Input label="Deadline" labelPlacement="outside" variant="bordered" errorMessage="Your Level 1 goal (due 2025-05-10) is in conflict with Level 2 (due 2025-04-30). Please ensure lower levels come before higher levels." isInvalid />

Expected behavior

The error message should wrap normally to multiple lines and be visually separated below the input field.

It should not overlap with the label or the surrounding form layout.

Proper spacing (margin-top) and wrapping should be applied to the error text container.

Screenshots or Videos

Operating System Version

Ubuntu

Browser

Chrome

[linear[bot]]

ENG-2424 [BUG] - Input variant="bordered" with labelPlacement="outside" causes error message overflow

[Vishvsalvi]

The same thing happens to description

[Vishvsalvi]

Imo, @wingkwong the problem lies here in the pb calculation of the base div and the helper div as well

[Blackmamoth]

@wingkwong is anyone working on this issue? If not please assign it to me

[wingkwong]

@Blackmamoth there's already a PR.

[Blackmamoth]

Ok, it wasn't merged yet so I thought the issue wasn't yet solved