| 1 |
import React from 'react'; |
| 2 |
|
| 3 |
function InputField( props ) { |
| 4 |
const { attr } = props; |
| 5 |
|
| 6 |
const [ inputvalue, setInputvalue ] = React.useState( props.value ); |
| 7 |
|
| 8 |
function handleChange( e ) { |
| 9 |
setInputvalue( e.target.value ); |
| 10 |
} |
| 11 |
|
| 12 |
const type = props.type ? props.type : 'text'; |
| 13 |
return ( |
| 14 |
<> |
| 15 |
<div className="mb-3 xl:w-96"> |
| 16 |
<label |
| 17 |
htmlFor="exampleFormControlInput1" |
| 18 |
className="form-label inline-block mb-2 text-gray-700" |
| 19 |
> |
| 20 |
{ props.label } |
| 21 |
</label> |
| 22 |
|
| 23 |
<input |
| 24 |
{ ...attr } |
| 25 |
type={ type } |
| 26 |
className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" |
| 27 |
name={ props.name } |
| 28 |
value={ inputvalue } |
| 29 |
id={ props.id } |
| 30 |
onChange={ handleChange } |
| 31 |
placeholder={ props.placeholder } |
| 32 |
min={ props.min } |
| 33 |
max={ props.max } |
| 34 |
readOnly={ props.readonly } |
| 35 |
></input> |
| 36 |
</div> |
| 37 |
</> |
| 38 |
); |
| 39 |
} |
| 40 |
|
| 41 |
export default InputField; |
| 42 |
|
