Shadcn Floating Label Input Component with Dark and Light Mode Support

Elevate your forms with our sleek and fully customizable React input component, designed to seamlessly adapt to both dark and light themes. This component features dynamic label animations, responsive focus effects, and effortless integration with Tailwind CSS. Whether you're building a modern web application or a stylish landing page, our Custom Input component ensures a consistent and elegant user experience across all devices and themes. Effortlessly toggle between dark and light modes, and enhance your UI with this versatile input solution. Perfect for developers who value both functionality and aesthetics.

Name

    import React from "react";
interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  id?: string;
  label: string;
}

const CustomInput: React.FC<CustomInputProps> = ({
  id,
  label,
  className = "",
  ...inputProps
}) => {
  return (
    <div className={`relative z-0 ${className}`}>
      <input
        id={id}
        className="block py-2.5 h-[40px] px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-teal-500 focus:outline-none focus:ring-0 focus:border-teal-600 peer"
        placeholder=" "
        {...inputProps}
        autoComplete="off"
      />
      <label
        htmlFor={id}
        className="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-100 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-teal-600 dark:peer-focus:text-teal-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-100 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
      >
        {label}
      </label>
    </div>
  );
};

export default CustomInput;