fix(theme): incorrect label position of the select component

[IsDyh01]

Closes #5796

📝 Description

fix the incorrect label position of the select component when the labelPlacrment=outside and data-has-helper=true

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

no

📝 Additional Information

Summary by CodeRabbit

• Bug Fixes

  • Corrected Select label positioning when labelPlacement is set to “outside” and helper text is present, preventing overlap and misalignment.
  • Ensures consistent spacing and alignment across sizes (including medium and large), improving readability and overall layout stability.

• Chores

  • Prepared a patch release entry for the theme to deliver this fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: b6d76a2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@heroui/theme	Patch
@heroui/autocomplete	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/number-input	Patch
@heroui/radio	Patch
@heroui/select	Patch
@heroui/table	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@IsDyh01 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adjusts select component label positioning in theme classes for cases with outside label placement and helper text, replacing calc-based translate values with zero translation and adding positioning wrappers. Adds a changeset documenting a patch release for @heroui/theme addressing the label position issue.

Changes

Cohort / File(s)	Summary
Theme: Select label positioning packages/core/theme/src/components/select.ts	Replaced calc-based translate-y for outside label placements when data-has-helper=true with -translate-y-0 and added relative pe-2 pb-1.5 wrappers across size variants. No public API changes.
Release: Changeset .changeset/long-kings-study.md	Adds patch changeset for @heroui/theme noting fix for incorrect select label position when labelPlacement is outside with helper text (refs #5796).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix(select): select label #5147 — Also modifies select.ts to adjust label positioning when helper text is present, indicating a closely related styling change.

Suggested reviewers

• jrgarciadev
• wingkwong

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description includes the required headings but leaves the Current behavior and Additional Information sections empty, so it lacks descriptions of the existing behavior being modified and any relevant context.	Please provide a summary of the current behavior being modified under the “Current behavior” section and add relevant context or links under “Additional Information” to fully complete the template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title is clear and concise, summarizing the main fix for the select component’s label positioning. It follows the conventional commit format with the “fix(theme):” prefix to indicate the scope and type of change. This provides enough context for reviewers scanning the pull request history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5799

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5799

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5799

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5799

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5799

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5799

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5799

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5799

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5799

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5799

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5799

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5799

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5799

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5799

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5799

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5799

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5799

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5799

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5799

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5799

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5799

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5799

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5799

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5799

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5799

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5799

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5799

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5799

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5799

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5799

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5799

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5799

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5799

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5799

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5799

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5799

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5799

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5799

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5799

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5799

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5799

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5799

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5799

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5799

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5799

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5799

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5799

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5799

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5799

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5799

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5799

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5799

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5799

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5799

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5799

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5799

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5799

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5799

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5799

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5799

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5799

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5799

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5799

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5799

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5799

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5799

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5799

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5799

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5799

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5799

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5799

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5799

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5799

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5799

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5799

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5799

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5799

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5799

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5799

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5799

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5799

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5799

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5799

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5799

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5799

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5799

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5799

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5799

commit: b6d76a2

[wingkwong]

can you also double check other components with similar structure like input, number-input etc?

[IsDyh01]

ok, I'll check it later.

[IsDyh01]

@wingkwong I checked the components such as input, number-input, and textarea, and none of them had this problem because their structures are different from the element structures of select

Input

Textarea

NumberInput

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 16, 2025 2:41am
heroui-sb	Ready	Preview	Comment	Oct 16, 2025 2:41am