fix: label placement when the select has a placeholder or description

.changeset/tough-brooms-hunt.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fix the label placement when the `Select` has a `placeholder` or `description`.

packages/components/select/__tests__/select.test.tsx

@@ -723,11 +723,12 @@ describe("Select", () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it("should place the label outside when labelPlacement is outside", () => {
+  it("should place the label outside when labelPlacement is outside and isMultiline enabled", () => {
     const labelContent = "Favorite Animal Label";
 
     render(
       <Select
+        isMultiline
         aria-label="Favorite Animal"
         data-testid="select"
         label={labelContent}

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

@@ -314,7 +314,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const hasPlaceholder = !!placeholder;
   const shouldLabelBeOutside =
     labelPlacement === "outside-left" ||
-    (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
+    (labelPlacement === "outside" &&
+      (!(hasPlaceholder || !!description) || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
   const isOutsideLeft = labelPlacement === "outside-left";
 

packages/components/select/stories/select.stories.tsx

@@ -357,6 +357,43 @@ const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
         </Select>
       </div>
     </div>
+    <div className="w-full max-w-2xl flex flex-col gap-3">
+      <h3>With placeholder and description</h3>
+      <div className="w-full flex flex-row items-end gap-4">
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside"
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside-left"
+        >
+          {items}
+        </Select>
+      </div>
+    </div>
   </div>
 );