FloatingLabelInput

import React, { useState } from 'react';

interface FloatingLabelInputProps {
  label: string;
  type: string;
}

const FloatingLabelInput: React.FC<FloatingLabelInputProps> = ({ label, type }) => {
  const [focused, setFocused] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const handleFocus = () => {
    setFocused(true);
  };

  const handleBlur = () => {
    setFocused(false);
  };

  return (
    <div className="floating-label-input">
      <input
        type={type}
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onFocus={handleFocus}
        onBlur={handleBlur}
        className={focused ? 'focused' : ''}
      />
      <label className={focused || inputValue !== '' ? 'floated' : ''}>{label}</label>
    </div>
  );
};

export default FloatingLabelInput;

Component info

Dependencies

About

A React input component with a floating label that animates above the input field on focus, featuring a gold border to highlight the focused state. Built with TypeScript and designed for dark backgrounds, this component provides a visually appealing and interactive user experience. With its sleek and modern design, the FloatingLabelInput is perfect for applications that require a touch of elegance and sophistication. The component is fully customizable, allowing developers to tailor its appearance to suit their specific needs. Whether used in a login form, search bar, or any other input field, the FloatingLabelInput is sure to enhance the overall user interface and provide a seamless user experience. The component's dark background and gold accents make it particularly well-suited for applications with a dark or luxury theme.