You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

16 lines
650 B
JavaScript

import React from 'react'
import styles from './styles.module.css'
export default function Input({label: _label, error, hint, type, name, value, onChange, onBlur, isValid = true}){
const label = (_label === undefined) ? name.replace(name[0], name[0].toUpperCase()) : _label
return (
<div className={styles.formElementContainer}>
{label && <label htmlFor={name}>{label}:</label>}
<input className={(isValid && !error)?'':styles.invalid} type={type} name={name} value={value} onChange={onChange} onBlur={onBlur} />
{(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
</div>
)
}