48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
|
|
interface IInputGroupProps {
|
|
labelKey?: string
|
|
labelText: string
|
|
inputKey: string
|
|
labelClassName: string
|
|
inputClassName: string
|
|
type: string
|
|
value?: string
|
|
checked?: boolean
|
|
defaultValue?: string
|
|
defaultChecked?: boolean
|
|
isDisabled?: boolean
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
const className = `
|
|
w-full
|
|
text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
|
|
bg-white border-2 border-white rounded-lg placeholder-gray-800
|
|
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
|
|
disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
|
|
|
|
export const InputGroup: React.FunctionComponent<IInputGroupProps> = (props) => {
|
|
return <>
|
|
<label
|
|
key={props.labelKey}
|
|
className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
|
|
htmlFor={props.inputKey}
|
|
>
|
|
{ props.labelText }
|
|
|
|
</label>
|
|
<input
|
|
key={props.inputKey}
|
|
id={props.inputKey}
|
|
className={`${className} ${props.inputClassName}`}
|
|
type={props.type}
|
|
value={props.value}
|
|
defaultValue={props.defaultValue}
|
|
checked={props.checked}
|
|
defaultChecked={props.defaultChecked}
|
|
onChange={props.onChange}
|
|
disabled={props.isDisabled}
|
|
/>
|
|
</>;
|
|
};
|