production level react component input.jsx

jsx

import React, { useId, ref } from 'react'

const Input = React.forwardRef(function Input({
    label,
    type = 'text',
    className = "",
    ...props

}, ref) {

    const id = useId();

    return (
        <div className='w-full' >
            {label && <label className='inline-block mb-1  text-[14px] font-medium text-neutral500' htmlFor={id}>{label}</label>}

            <input
                id={id} type={type}
                className={` bg-white text-neutral500 p-2 rounded-lg border border-neutral100 w-full focus:border-[#000000] ${className}`}

                ref={ref} {...props} />
        </div>
    )
})

export default Input