From a7be56e1ca680b144c2a5dca3b8cd00577cc533c Mon Sep 17 00:00:00 2001 From: doki- <1335902682@qq.com> Date: Sat, 11 Oct 2025 15:27:16 +0800 Subject: [PATCH 1/2] fix(theme): incorrect label position of the select component --- .changeset/long-kings-study.md | 5 +++++ packages/core/theme/src/components/select.ts | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/long-kings-study.md diff --git a/.changeset/long-kings-study.md b/.changeset/long-kings-study.md new file mode 100644 index 0000000000..5d8ae02749 --- /dev/null +++ b/.changeset/long-kings-study.md @@ -0,0 +1,5 @@ +--- +"@heroui/theme": patch +--- + +fix incorrect label position of select component when the labelPlacement is outside and data-has-helper=true (#5796) diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index 8fba4e53d2..7842256cb7 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -730,7 +730,7 @@ const select = tv({ "start-2", "text-tiny", "group-data-[filled=true]:-translate-y-[calc(100%_+var(--heroui-font-size-tiny)/2_+_16px)]", - "group-data-[has-helper=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_26px)]", + "group-data-[has-helper=true]:-translate-y-0 relative pe-2 relative pe-2 pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_8px)]", }, @@ -744,7 +744,7 @@ const select = tv({ "start-3", "text-small", "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_20px)]", - "group-data-[has-helper=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_30px)]", + "group-data-[has-helper=true]:-translate-y-0 relative pe-2 relative pe-2 pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_10px)]", }, @@ -758,7 +758,7 @@ const select = tv({ "start-3", "text-medium", "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_24px)]", - "group-data-[has-helper=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_34px)]", + "group-data-[has-helper=true]:-translate-y-0 relative pe-2 pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_12px)]", }, From b6d76a2749c2e8a00a22ff586a13b9a36a4a21a0 Mon Sep 17 00:00:00 2001 From: doki- <1335902682@qq.com> Date: Sat, 11 Oct 2025 15:33:52 +0800 Subject: [PATCH 2/2] fix(theme): incorrect label position of select component --- packages/core/theme/src/components/select.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index 7842256cb7..317102f93d 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -730,7 +730,10 @@ const select = tv({ "start-2", "text-tiny", "group-data-[filled=true]:-translate-y-[calc(100%_+var(--heroui-font-size-tiny)/2_+_16px)]", - "group-data-[has-helper=true]:-translate-y-0 relative pe-2 relative pe-2 pb-1.5", + "group-data-[has-helper=true]:-translate-y-0", + "group-data-[has-helper=true]:relative", + "group-data-[has-helper=true]:pe-2", + "group-data-[has-helper=true]:pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_8px)]", }, @@ -744,7 +747,10 @@ const select = tv({ "start-3", "text-small", "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_20px)]", - "group-data-[has-helper=true]:-translate-y-0 relative pe-2 relative pe-2 pb-1.5", + "group-data-[has-helper=true]:-translate-y-0", + "group-data-[has-helper=true]:relative", + "group-data-[has-helper=true]:pe-2", + "group-data-[has-helper=true]:pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_10px)]", }, @@ -758,7 +764,10 @@ const select = tv({ "start-3", "text-medium", "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_24px)]", - "group-data-[has-helper=true]:-translate-y-0 relative pe-2 pb-1.5", + "group-data-[has-helper=true]:-translate-y-0", + "group-data-[has-helper=true]:relative", + "group-data-[has-helper=true]:pe-2", + "group-data-[has-helper=true]:pb-1.5", ], base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_12px)]", },