"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface FloatingInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

export const FloatingInput = React.forwardRef<
  HTMLInputElement,
  FloatingInputProps
>(({ className, label, id, ...props }, ref) => {
  const [isFocused, setIsFocused] = React.useState(false);
  const [hasValue, setHasValue] = React.useState(false);
  const generatedId = React.useId();
  const inputId = id ?? generatedId;

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(true);
    props.onFocus?.(e);
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(false);
    props.onBlur?.(e);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setHasValue(e.target.value.length > 0);
    props.onChange?.(e);
  };

  const isFloating = isFocused || hasValue;

  return (
    <div className="relative">
      <input
        ref={ref}
        id={inputId}
        className={cn(
          "peer w-full rounded-lg border border-input bg-background px-4 py-3 text-foreground placeholder-transparent transition-all duration-200",
          "focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
          "disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        placeholder={label}
        onFocus={handleFocus}
        onBlur={handleBlur}
        onChange={handleChange}
        aria-labelledby={`${inputId}-label`}
        {...props}
      />
      <label
        id={`${inputId}-label`}
        htmlFor={inputId}
        className={cn(
          "pointer-events-none absolute left-4 transition-all duration-200",
          isFloating
            ? "-top-2.5 bg-background px-1 text-xs text-primary"
            : "top-3 text-muted-foreground"
        )}
      >
        {label}
      </label>
    </div>
  );
});

FloatingInput.displayName = "FloatingInput";
Floating Input

Dependencies

Files

Installation
