Change the checkbox colour dynamically

[DiegoMcDipster]

Hi,

For UX reasons I want to change the checkbox colour dynamically.

Scenario:
A user is filling in a form and they need to confirm, via a checkbox, that they have read the terms and conditions.
Before they confirm I would like the checkbox to be red
Upon confirmation (checkbox is ticked) I would like to change it's colour to green.

I've looked online and I couldn't find a simple way of doing it. I have my fingers crossed that Formik makes this less painful.

Thanks in advance!

[maddhruv]

Hey @DiegoMcDipster
The easiest was you can achieve this is -
let's say the checkbox field name is tac, so now formik (useFormik) can give you an object of all the values on your form (which can be signup/login, depends upon your use case) and now you can simply use values.tac to refer if the checkbox is selected or not. And on the basis of this value (values.tac) you can change the corresponding properties/stylings for the checkbox

<Checkbox color={values.tac ? 'green' : 'red'} />

[DiegoMcDipster]

Thanks @maddhruv for the quick response. The problem I'm facing is that using the attribute color='red' / 'green' does not change the colour of the checkbox. It remains black by default.

If you have this working can you please put the code here or in a sandbox so that I can play around with it?

Again thanks!

[maddhruv]

attribute color='red' / 'green'
@DiegoMcDipster there is no such attribute as color for checkbox

I was just giving an example of how you can style conditionally.

Would recommend you to follow https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css

[DiegoMcDipster]

Thanks for the link. You've answered my question: there is no super simple way of doing it. So, I'll do it via CSS.

Again, thanks for taking the time to support!