如何在输入框非空时保持浮动标签置顶（NextJs+React+Tailwind）

问题分析 #

Flowbite的浮动标签效果依赖内置样式类处理输入框非空时的标签状态，但纯Tailwind的peer-placeholder-shown仅在输入框显示占位符时生效——当输入框有值但未聚焦时，占位符隐藏，peer相关样式不会触发标签置顶，因此需要通过React的value状态手动控制标签样式。

解决方案 #

修改label的className，根据value是否为空动态添加置顶样式，确保输入框有内容时标签始终保持在顶部：

'use client'
import { ChangeEvent } from "react"

type InputFieldProps = {
  name: string, 
  onChange: (e: ChangeEvent<HTMLInputElement>) => void,
  id: string,
  type: string,
  htmlFor: string,
  value: string,
}

const InputField: React.FC<InputFieldProps> = ({ name, id, type, htmlFor, value, onChange }) => {
  return (
    <div className="relative">
      <input
        type={type}
        id={id}
        value={value}
        onChange={onChange}
        className={`font-roboto tracking-body-large w-[360px] h-[40px] px-2 text-base text-gray-900 bg-transparent rounded-[4px] border-[1px] border-[#CAC4D0] focus:outline-none focus:border-[#6750A4] peer`}
        required
      />
      <label
        htmlFor={htmlFor}
        className={`absolute text-base text-[#49454F] peer-focus:text-[#6750A4] duration-300 transform origin-[0] bg-white px-2 peer-focus:px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-[-0.25rem] peer-focus:scale-50 peer-focus:-translate-y-2 start-1 hover:cursor-text ${
          value ? 'top-[-0.25rem] scale-50 -translate-y-2' : 'scale-75 top-2'
        }`}
      >
        {name}
      </label>
    </div>
  );
};

export default InputField;

关键修改说明 #

• 替换原代码中空值判断的无效逻辑，当value非空时，添加与聚焦状态完全一致的top-[-0.25rem] scale-50 -translate-y-2样式；当value为空时，使用scale-75 top-2作为初始浮动状态。
• 实现效果：输入框有内容时，无论是否聚焦，标签都保持置顶；为空时恢复初始浮动状态，同时保留聚焦时的样式变化。

内容的提问来源于stack exchange，提问作者Akk1