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..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-[calc(100%_+_var(--heroui-font-size-small)/2_+_26px)]", + "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-[calc(100%_+_var(--heroui-font-size-small)/2_+_30px)]", + "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-[calc(100%_+_var(--heroui-font-size-small)/2_+_34px)]", + "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)]", },