Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 13 Mar 2025 11:52 by ADMIN
Alexander Green
Created on: 05 Oct 2023 12:31
Category: Switch
Type: Feature Request
3
Option for the Switch to render icons for onLabel and offLabel

Currently, the onLabel and offLabel properties can only be set to string values. There should be an option that allows setting icons for the Switch component.

 

3 comments
ADMIN
Silviya
Posted on: 13 Mar 2025 11:52

Hello,

The new type is enabled in 10.1.0-develop.1 version of the @progress/kendo-react-inputs package.

Regards,
Silviya
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

ADMIN
Silviya
Posted on: 11 Mar 2025 14:18

Hello Jan,

Thank you for sharing your experience and the workaround you've implemented. I understand the validation errors in the console can be an inconvenience during development.

We are planning to update the onLabel and offLabelprop types to ReactNode to allow more flexibility, in an upcoming version of KendoReact. This change should address the validation errors you're currently encountering and allow you to use icons directly without any issues.

Until the update is released, your approach of disabling TypeScript validation and using the rendered Icon component is a viable solution.

    Best Regards,


    Silviya
    Progress Telerik

    Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

    Jan
    Posted on: 06 Mar 2025 15:57

    Our team had the same issue and our workaround was to disable TypeScript validation for the onLabel/offLabel and just pass there directly the rendered Icon component.

     

    <Switch onLabel={<Icon ... />} offLabel={<Icon ... />} .../>

     

    This works well as expected. The only issue is we get validation errors in browser console during development.

     

    So, for us, it would be enough if Kendo just changed prop types of onLabel/offLabel from string to ReactNode.

    Create an account Log In
    View
    Type
    Status
    Category