fix(theme): incorrect label position of the select component by IsDyh01 · Pull Request #5799 · heroui-inc/heroui

IsDyh01 · 2025-10-11T07:35:17Z

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 · 2025-10-11T07:35:21Z

🦋 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 · 2025-10-11T07:35:22Z

@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 · 2025-10-11T07:35:40Z

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

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

pkg-pr-new · 2025-10-11T07:41:39Z

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 · 2025-10-15T06:34:37Z

ok, I'll check it later.

IsDyh01 · 2025-10-16T02:19:02Z

@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 · 2025-10-16T02:38:11Z

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

heroui-inc/heroui#5799 heroui-inc/heroui#5893 heroui-inc/heroui#5909 heroui-inc/heroui#5916

IsDyh01 added 2 commits October 11, 2025 15:27

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

a7be56e

fix(theme): incorrect label position of select component

b6d76a2

IsDyh01 requested a review from jrgarciadev as a code owner October 11, 2025 07:35

wingkwong reviewed Oct 15, 2025

View reviewed changes

vercel Bot deployed to Preview – heroui October 16, 2025 02:40 View deployment

vercel Bot deployed to Preview – heroui-sb October 16, 2025 02:41 View deployment

AnYiEE added a commit to AnYiEE/touhou-mystia-izakaya-assistant that referenced this pull request Nov 20, 2025

fix(components): apply HeroUI patches

2cf4065

heroui-inc/heroui#5799 heroui-inc/heroui#5893 heroui-inc/heroui#5909 heroui-inc/heroui#5916

wingkwong added this to the v2.8.6 milestone Dec 2, 2025

wingkwong self-assigned this Dec 2, 2025

wingkwong approved these changes Dec 11, 2025

View reviewed changes

wingkwong merged commit 4c43534 into heroui-inc:canary Dec 11, 2025
10 checks passed

github-actions Bot mentioned this pull request Dec 11, 2025

ci(changesets): 📦 version packages #5820

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix(theme): incorrect label position of the select component#5799
wingkwong merged 2 commits into
heroui-inc:canaryfrom
IsDyh01:fix/select-label-placement

IsDyh01 commented Oct 11, 2025 •

edited by wingkwong

Loading

Uh oh!

changeset-bot Bot commented Oct 11, 2025

Uh oh!

vercel Bot commented Oct 11, 2025

Uh oh!

coderabbitai Bot commented Oct 11, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 11, 2025

Uh oh!

wingkwong left a comment

Uh oh!

IsDyh01 commented Oct 15, 2025

Uh oh!

IsDyh01 commented Oct 16, 2025

Uh oh!

vercel Bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

IsDyh01 commented Oct 11, 2025 • edited by wingkwong Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Oct 11, 2025

🦋 Changeset detected

Uh oh!

vercel Bot commented Oct 11, 2025

Uh oh!

coderabbitai Bot commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new Bot commented Oct 11, 2025

Uh oh!

wingkwong left a comment

Choose a reason for hiding this comment

Uh oh!

IsDyh01 commented Oct 15, 2025

Uh oh!

IsDyh01 commented Oct 16, 2025

Uh oh!

vercel Bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

IsDyh01 commented Oct 11, 2025 •

edited by wingkwong

Loading

coderabbitai Bot commented Oct 11, 2025 •

edited

Loading

vercel Bot commented Oct 16, 2025 •

edited

Loading