I want to make it necessary to mark the React js checkbox component. I want to show warning icon when Checkbox is not selected. How can I do that? I shared the component I wrote below.
React checkbox component
const CheckBox = ({
question,
formKey,
valid = true,
validationError = 'Field is required',
}) => {
const dispatch = useDispatch()
const reduxValue = useSelector(state => state.app.forms.f3[formKey].value)
const isSaved = useSelector(state => state.app.forms.f3[formKey].saved)
const [input, setInput] = useState({
value: reduxValue,
valid: true,
})
return (
<>
<Row>
<Col className="col-1">
<label className="orange-checkbox-container">
<input
type="checkbox"
name={formKey}
onChange={(e) => changeSelected(e)}
checked={input.value}
/>
<span className="checkmark"></span>
</label>
</Col>
<Col className="col-11">
<p>{question}</p>
</Col>
</Row>
<div
className="invalid-feedback"
style={{
width: '8rem',
}}
>
{validationError}
</div>
</>
);
}