input.tsx (1115B)
1 import { ChangeEvent, FC, memo } from 'react'; 2 3 type InputProps = { 4 /** 5 * The Placeholder text 6 */ 7 placeholder: string 8 /** 9 * If it is a password input 10 */ 11 password?: boolean 12 /** 13 * If input should be autofocused 14 */ 15 autoFocus?: boolean 16 /** 17 * The value of the input field 18 */ 19 value: string 20 /** 21 * If the input is readonly 22 */ 23 readonly: boolean 24 /** 25 * Handler for the onChange event 26 */ 27 onChange: (e: ChangeEvent<HTMLInputElement>) => void; 28 }; 29 30 const Input: FC<InputProps> = memo(({ placeholder, password = false, autoFocus = false, value, readonly, onChange }: InputProps) => { 31 return ( 32 <input 33 disabled={readonly} 34 className='text-base form-input rounded-lg disabled:bg-slate-200 disabled:cursor-not-allowed transition-colors ease-in-out delay-150 text-black' 35 value={value} 36 type={password ? "password" : "text"} 37 autoFocus={autoFocus} 38 placeholder={placeholder} 39 onChange={onChange} 40 /> 41 ); 42 }) 43 export default Input;