How to add class to NumericTextBox

[Paul]

I am trying to add class focusable to SfNumericTeextBox  via CssClass but Syncfusion sticks the class on the wrapper span, not on the inner <input>. 

I have tried InputCssClass but InputCssClass isn’t being applied because it’s treated as a passthrough attribute, not merged into the actual class list.

But per my requirement I need the class to be added to the inner <input> class list.

Thanks for the usual assistance.

Regards,

Paul Aziz

[Priyanka Karthikeyan]

Hi Paul,

 

Thank you for reaching out to us.

 

You can add the class attribute to the input element using the InputAttributes property. However, we are currently experiencing an issue where the NumericTextBox is not rendered properly when the class attribute is added via InputAttributes.

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_InputAttributes

 

We have considered this issue "NumericTextBox is not rendered porperly When we add the class atribute using InputAttributes" as a bug from our end, and the fix for the issue will be included in the first weekly release after Volume 3 2025 release which is expected to be scheduled for the First week of September 2025.

 

You can now track the status of the Feedback through the below link,

 

 

Feedback link:https://www.syncfusion.com/feedback/69328/numerictextbox-is-not-rendered-porperly-when-we-add-the-class-atribute-using

 

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Priyanka K

[Paul]

Hi Priyanka,

Thank you the repry.

Regards,

Paul Aziz

[Priyanka Karthikeyan]

Hi Paul,

After thoroughly validating the issue, we’ve observed that the InputAttributes dictionary does not merge with the default input classes when a "class" key is provided. Instead, it replaces the default classes. This behavior is intentional and aligns with the rendering logic, which does not automatically combine custom classes with internal ones.

To retain the default styling while adding custom classes, it’s recommended to manually merge the class list within InputAttributes. For example:

<SfNumericTextBox TValue="int?" InputAttributes="@attr"></SfNumericTextBox>

@code {

    public Dictionary<string, object> attr = new Dictionary<string, object>() {

        { "class", "e-control e-numerictextbox e-lib e-input focusable" }

    };

}

This approach ensures that the focusable class is added to the <input> element, while preserving Syncfusion’s default classes—maintaining full styling and expected behavior.

You can refer to the following sample for more details:

https://blazorplayground.syncfusion.com/rXLyXvrBhKaKEObB

Regards,

Priyanka K