Is it possible to change the color of the checkbox?

[kocur4d]

I am using some checkboxes in my forms but I am not using mantine form.

Other inputs have prop exposed invalid which works perfectly fine.

Is there a way to achieve something similar with a checkbox?

I would just like to change the color of the highlighted square to red similar how phone number input has its border set to red.

Cheers

[rtivital]

https://codesandbox.io/s/patient-lake-5z6cf4?file=/src/App.tsx

[kocur4d]

Cheers that worked.

Is there any way to accomplish similar, overwrite the input styles, by using createStyles API?

I am using colors from a theme and to extract them to use in styles prop is not very elegant.

[rtivital]

https://mantine.dev/theming/styles-api/

[kocur4d]

OK I think I got it. Thank you.

I could do something like this

const useStyles = createStyles((theme) => ({
  checkbox: {
    input: {
      border: "1px solid red",
    },
  }
}))

and apply checkbox class to the Checkbox conditionally.

[kocur4d]

Ok so by passing styles to Checkbox I can update props but wouldn't it be nicer to have similar API like other Input's via some prop like invalid?