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.
26 lines
890 B
JavaScript
26 lines
890 B
JavaScript
import React, {useEffect} from 'react'
|
|
|
|
import styles from './styles.module.css'
|
|
|
|
export default function Checkbox({label, error, hint, name, value, onChange, onBlur, isValid}){
|
|
const handleCheck = ev => {
|
|
onChange({target: {value: !value}})
|
|
}
|
|
|
|
useEffect(()=>{
|
|
if(value === "")
|
|
onChange({target: {value: false}})
|
|
}, [])
|
|
|
|
return (
|
|
<div className={styles.formElementContainer + ' ' + styles.checkboxContainer}>
|
|
<label htmlFor={name}>{label}:</label>
|
|
|
|
<div className={styles.complexInput + ((isValid && !error)?'':' ' + styles.invalid)}>
|
|
<input type="checkbox" checked={value} className={(isValid && !error)?'':styles.invalid} name={name} onChange={handleCheck} onBlur={onBlur} />
|
|
<label onClick={handleCheck} htmlFor={name}>{hint}</label>
|
|
</div>
|
|
{error && <span className={styles.hint}>{error || ''}</span>}
|
|
</div>
|
|
)
|
|
} |