React 및 Tailwind를 사용한 플로팅 라벨 입력

이번 주에 Hyperlaunch의 로그인 페이지 작업을 했고 멋진 터치를 추가하고 싶었습니다(첫인상이 중요하기 때문입니다!).

그 중 하나는 머티리얼 UI 등에서 볼 수 있는 멋진 "플로팅 라벨"입력을 수행하는 것이었습니다. 사용자 로그인과 같은 기능에 정말 좋은 패턴입니다. 최소한의 멋진 느낌을 주는 매우 능률적인 프레젠테이션이기 때문입니다.



이 접근 방식은 placeholder 속성을 사용하는 것이라고 생각할 수 있지만 불행히도 약간의 접근성 문제가 발생할 수 있습니다. 이 문제를 해결하는 방법은 대신 absolute 위치가 지정된 레이블을 사용하는 것입니다. 이렇게 하면 화면 판독기가 여전히 양식을 올바르게 해석할 수 있습니다. 이 접근 방식은 미묘한 전환을 추가하여 UX 게임을 실제로 향상시킬 수 있다는 추가적인 이점이 있습니다.

React 및 Tailwind CSS로 부동 레이블 입력을 구현했습니다. state hook을 사용하여 사용자 작업을 기반으로 클래스 이름을 전환합니다.

결과는 훌륭하고 간결한 구성 요소입니다.

function FloatingLabelInput({ type, name, children }) {
  const [active, setActive] = React.useState(false);

  function handleActivation(e) {
    setActive(!!e.target.value);
  }

  return (
    <div className="relative border rounded mb-2 bg-gray-600 text-white border-white border-opacity-25">
      <input
        className={[
          "outline-none w-full rounded bg-transparent text-sm transition-all duration-200 ease-in-out p-2",
          active ? "pt-6" : ""
        ].join(" ")}
        id={name}
        name={name}
        type={type}
        onChange={handleActivation}
      />
      <label
        className={[
          "absolute top-0 left-0 flex items-center text-white text-opacity-50 p-2 transition-all duration-200 ease-in-out",
          active ? "text-xs" : "text-sm"
        ].join(" ")}
        htmlFor={name}
      >
        {children}
      </label>
    </div>
  );
}

다음과 같이 사용하기 쉽습니다: <FloatingLabelInput name="username" type="text">Username</FloatingLabelInput>
my Codepen에서 실제로 볼 수 있습니다.