diff --git a/components/checkbox/animated.jsx b/components/checkbox/animated.jsx index c11b40f6d..5cb731ff6 100644 --- a/components/checkbox/animated.jsx +++ b/components/checkbox/animated.jsx @@ -10,8 +10,15 @@ import { classNames } from '@oacore/design/lib/utils' import styles from './styles.module.scss' -const Checkbox = ({ id, labelText, setCheckbox, className }) => { - const [isChecked, setIsChecked] = useState(false) +const Checkbox = ({ + id, + labelText, + setCheckbox, + className, + value = false, + isDisabled = false, +}) => { + const [isChecked, setIsChecked] = useState(value) const checkboxAnimationRef = useSpringRef() const checkboxAnimationStyle = useSpring({ backgroundColor: isChecked ? '#b75400' : '#fff', @@ -20,6 +27,11 @@ const Checkbox = ({ id, labelText, setCheckbox, className }) => { ref: checkboxAnimationRef, }) + const checkedboxtyle = useSpring({ + backgroundColor: '#757575', + borderColor: '#757575', + }) + const [checkmarkLength, setCheckmarkLength] = useState(null) const checkmarkAnimationRef = useSpringRef() @@ -42,6 +54,7 @@ const Checkbox = ({ id, labelText, setCheckbox, className }) => { { setIsChecked(!isChecked) setCheckbox(!isChecked) @@ -49,7 +62,7 @@ const Checkbox = ({ id, labelText, setCheckbox, className }) => { className={styles.disabled} />