How to Apply a Common Wrapper to All Kendo Form Fields

[Grant]

Hi all,

I've been working with Kendo Form for a while and I'm now trying to add some custom behavior or styling to all my form fields. For example, I might want to consistently wrap them with extra logic, validation hints, or a custom layout.

Here’s a simplified case using a `Checkbox`:

<Field component={Checkbox} name="acceptTerms" />

To achieve the desired behavior, I’ve tried creating a `MyCustomCheckbox` component (see here). That works fine — but I don’t want to have to create `MyCustomInput`, `MyCustomDropdown`, `MyCustomDatePicker`, etc. for every component I use.

Is there a way to apply the same wrapper or logic at a more general level, so that I can just write:

<Field component={Input} name="email" />
<Field component={Checkbox} name="acceptTerms" />

…and have both get wrapped or enhanced in the same way — without duplicating the logic in multiple custom components?

Any tips or patterns would be greatly appreciated!

Thanks,
Grant

[Yanko]

Hello, Grant,

Yes, you can achieve consistent wrapping and logic for all KendoReact Form fields by creating a single, reusable wrapper component.

Define a wrapper component that receives the actual input component as a prop and handles the shared logic or styling.
For each <Field>, specify your wrapper as the component, and pass the specific input (Input, Checkbox, etc.) as a prop.

I prepared a StackBlitz example to demonstrate the described approach. Feel free to extend it for further testing and to use it as a backbone for a more detailed implementation:

• https://stackblitz.com/edit/react-1ey7czr4-zrihxd2m?file=app%2Fapp.jsx 

If I can further help you please let me know.

Regards,
Yanko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.