Customize Validation Rule Notification

NOTE: I am very new to Retool.

I am looking to customize the color on the notifications (See the "Incorrect!" and "Correct!" displayed in the example) that are presented when using a Validation Rule on a component but I can't seem to find a way to do this. I looked at using CSS but I need it to obviously be conditional. Thanks!

CleanShot 2024-02-14 at 09.14.50

Hello and welcome aboard,

I think the validation rules aren't something that you can style because they're used for warnings/errors/exceptions and so always fall into that pre-defined style.

Instead of using the validation message you may want to look at the status component instead, which might be more powerful component to use in this case?

See, I didn't even think about that component! Thank you! What would recommend as the best way to control the status component from the radio button component as I can think of several ways to do this?

There are lots of ways to do this, it will depend on how you're creating the questions, how many you have, how you determine if the answer is "correct" or not and how flexible it needs to be.

I'd probably set the different Status options to a mapped variable with the "correct" and "incorrect" messages you want to use for all the questions (I'm assuming you want more than one and they have the same responses). Then I'd set the default value of the Status component to the value of the radio button component if it has a value - like I say, it all depends on how/when you want it to show and how you determine correct or not.

Great idea. I really appreciate the help.