Textbox colour change at runtime

How can we change the colour of a numeric textbox at runtime
The colour of text should be red if value is less than zero else colour should be blue

Without trying it before i answer.

First make a variable called "numberColor" on Load event of page and set it to "(0, 0, 0)". <- black
Set the Color property in Styletab on numeric to ${numberColor}
You can use the "Change" event on the Numeric component to then change to color,


args in this case is what number the user typ in the numeric component.


In combination with what @Gottegubben said you may also have to add the following CSS otherwise the color attribute won't propagate to the <input> element of the Numeric component:

        .rz-spinner-input {
            color: inherit;
1 Like

I tried the above solution. It gave me the below compiler error

Kindly advise

You need @() for complex expressions

1 Like

I tried by directly setting the RGB value from design mode but the text color is not displayed at run/design

What am I missing? Kindly guide

Did you add the CSS that I mentioned? Without it the color CSS attribute may not apply. You can inspect the CSS of the RadzenNumeric with your browser's developer tools to see what rules are applied.

1 Like

Sorry, missed that part.

My Bad! Updating the style.css resolved the color applying issue.

and also

gives the same error and does not compile

Kindly advise

In Radzen you should set the color as a custom style attribute:

The actual value is color:${value == 0 ?"red":"green"}

This generates the following code which works as expected:

style=@($"width: 150px;color:{(value == 0 ?"red":"green")}")

It relies on C# string interpolation to avoid the Blazor error about mixed content.

1 Like