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.
21 lines
787 B
JavaScript
21 lines
787 B
JavaScript
5 years ago
|
import React 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}})
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|
||
|
|
)
|
||
|
|
}
|