fix(components): prevent label shift when error message appears with …

.changeset/fix-label-position-outside.md

@@ -0,0 +1,14 @@
+---
+"@heroui/input": patch
+"@heroui/number-input": patch
+"@heroui/select": patch
+---
+
+fix(components): prevent label shift when error message appears with outside placement
+
+- Fixed label positioning issue in Select, Input, and NumberInput components
+- Label now maintains stable position when error message appears/disappears
+- Wrapped trigger/input element in relative positioned container
+- Error messages are now outside the label's positioning context
+- Fixes #5796
+

packages/components/input/src/input.tsx

@@ -84,9 +84,11 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     if (shouldLabelBeOutside) {
       return (
         <div {...getMainWrapperProps()}>
-          <div {...getInputWrapperProps()}>
-            {!isOutsideLeft && !isOutsideTop ? labelContent : null}
-            {innerWrapper}
+          <div style={{position: "relative"}}>
+            <div {...getInputWrapperProps()}>
+              {!isOutsideLeft && !isOutsideTop ? labelContent : null}
+              {innerWrapper}
+            </div>
           </div>
           {helperWrapper}
         </div>

packages/components/number-input/src/number-input.tsx

@@ -105,9 +105,11 @@ const NumberInput = forwardRef<"input", NumberInputProps>((props, ref) => {
     if (shouldLabelBeOutside) {
       return (
         <div {...getMainWrapperProps()}>
-          <div {...getInputWrapperProps()}>
-            {!isOutsideLeft ? labelContent : null}
-            {innerWrapper}
+          <div style={{position: "relative"}}>
+            <div {...getInputWrapperProps()}>
+              {!isOutsideLeft ? labelContent : null}
+              {innerWrapper}
+            </div>
           </div>
           {helperWrapper}
         </div>

packages/components/select/src/select.tsx

@@ -154,20 +154,22 @@ const Select = forwardRef(function Select<T extends object>(
   return (
     <div {...getBaseProps()}>
       <HiddenSelect {...getHiddenSelectProps()} />
-      {shouldLabelBeOutside ? labelContent : null}
       <div {...getMainWrapperProps()}>
-        <Component {...getTriggerProps()}>
-          {!shouldLabelBeOutside ? labelContent : null}
-          <div {...getInnerWrapperProps()}>
-            {startContent}
-            <span {...getValueProps()}>{renderSelectedItem}</span>
-            {endContent && state.selectedItems && (
-              <VisuallyHidden elementType="span">,</VisuallyHidden>
-            )}
-            {end}
-          </div>
-          {renderIndicator}
-        </Component>
+        <div style={{position: "relative"}}>
+          {shouldLabelBeOutside ? labelContent : null}
+          <Component {...getTriggerProps()}>
+            {!shouldLabelBeOutside ? labelContent : null}
+            <div {...getInnerWrapperProps()}>
+              {startContent}
+              <span {...getValueProps()}>{renderSelectedItem}</span>
+              {endContent && state.selectedItems && (
+                <VisuallyHidden elementType="span">,</VisuallyHidden>
+              )}
+              {end}
+            </div>
+            {renderIndicator}
+          </Component>
+        </div>
         {helperWrapper}
       </div>
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}