hensei-web/components/Input/index.tsx

49 lines
979 B
TypeScript

import classNames from 'classnames'
import React from 'react'
import './index.scss'
interface Props
extends React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
> {
contained?: boolean
error?: string
label?: string
}
const defaultProps = {
contained: false,
}
const Input = React.forwardRef<HTMLInputElement, Props>(function input(
{ contained, error, label, ...props },
forwardedRef
) {
const classes = classNames(
{
Input: true,
Contained: contained,
},
props.className
)
return (
<label className="Label" htmlFor={props.name}>
<input
{...props}
autoComplete="off"
className={classes}
defaultValue={props.value || ''}
ref={forwardedRef}
formNoValidate
/>
{label}
{error && error.length > 0 && <p className="InputError">{error}</p>}
</label>
)
})
Input.defaultProps = defaultProps
export default Input