5 Reasons To Choose the KendoReact Form Library

We’ve put together a list of the top 5 reasons to choose the KendoReact Form. Check them out, and see if we could have the answer to all your form-related woes.

Adding a form to your web app feels like it shouldn’t be all that hard, right? Throw a <form> tag around a few <input> tags, slap a submit button at the bottom and call it a day! But of course, when you get into the weeds of form creation, it always turns out to be a larger task than you had originally thought.

Depending on the complexity of your form, you could easily lose hours, if not full days on the project ... which is why finding a form library to do the heavy lifting for you has become such a popular solution for frontend developers. In fact, if you do a quick search for form libraries, you’ll see there are tons of them out there—this is a problem that developers have tried to solve over and over, for years now. With that abundance of options, how do you choose the form library that’s right for your React application?

Well, we on the KendoReact team could be a little biased, but we’re also confident in what we’ve built—and we’re sure that the KendoReact Form library will check all the boxes you’re looking for. So you could spend the next day or so researching, installing and comparing various React form libraries ... or, you could try KendoReact and get back to writing code.

We’ve put together a list of the top five reasons to choose the KendoReact Form. Check them out, and see if we could have the answer to all your form-related woes.

If you’d like to hear Kathryn talk about this, check out the companion video, 5 Reasons to Use the KendoReact Form.

5. Ease of Styling

Here’s a little bit of fun web trivia for you: Which came first, the form or the styling? If you guessed forms, you’re correct—forms were introduced as part of HTML2 in 1995, while Cascading Style Sheets weren’t released until the end of the following year and still had several more years before they were well-supported in browsers and not just officially W3C recommended. So next time you’re shaking your head and wondering why it’s so dang hard to customize a radio button, remember that, from a modern development perspective, they’re kind of antiques! It’s a bit like looking for the SD card slot on an 8-track player.

The common approach these days is to skip using the default HTML elements entirely and simply create your own. But, if you’ve ever tried to do that, you know that the “simply” in that last sentence is a little misleading. Form controls are complex, and rebuilding one from the ground up to be fully customizable and accessible takes time. We do it anyway, because having forms that look beautiful and match the rest of our application is important—but with the KendoReact Form, you can skip the “hard work” part and get right to the “looking beautiful” part.

All KendoReact components are designed with UX as the priority, so your users never have to struggle to figure out how a less-common input works. And, of course, they’re all fully theme-able, so you can either choose one of our five lovely pre-made themes, or create your own custom theme with our Figma Kits and apply it quickly and easily to the entirety of your application—forms included. Leaving you free to party like it’s 1999.

4. Built-in Multi-Step Forms

If you’ve got a lot of information to gather from your users, one of the best UX patterns you can use of is to break that flow up into multiple stages. Whether you call it a Wizard, a Stepper, or just a good ol’ fashioned Multi-Step Form, it’s an incredibly useful tool to leverage for your application. This approach can help a long form feel shorter by removing the “endless scroll” feeling, giving your users a visual representation of how much they have to complete, and organizing your form into groups of similar questions.

For really long forms, you might even consider allowing the user to save their progress and come back when they have time to finish. It’s a great way to create a more positive user experience, as well as increase the chances that they actually complete your form.

The KendoReact Form library includes support for multi-step forms right out of the box—by combining our React Stepper component with our React Form, you can easily break your form into as many stages as needed! Check out this demo of Multi-Step Forms with KendoReact, and see just how easy it is to set up. It’s so magical, you might just understand why some folks call them Wizards.

3. Variety of Inputs

Let’s be frank: A form library is only as good as the number of inputs it can offer you.

If you need even one input that isn’t included in a given library, it’s a dealbreaker. The only thing more painful than just using vanilla HTML forms is attempting to get two different third-party form libraries or (even worse) a bunch of unrelated individual input components from different libraries to all play nicely together. No, thank you. If that’s the ticket that gets assigned to you, it’s going to be the kind of sprint when you start suddenly realizing you have PTO you need to use before it expires.

Dodge the pain (and the ticket dodging), by making sure you commit to a library that has all the form elements you could ever need, and then some. Even if you think you’ve found a library that meets the needs of your application today, you also want to be sure it will meet the needs of your application tomorrow, next year and five years from now.

And—oh, what’s that you say? KendoReact has more than 20 different input components? Including less common ones, like a React MultiColumn Combo Box, a Color Gradient selector and a React Text Editor? Wow, you really know your stuff! You’re right: KendoReact offers all the inputs you could think of, and then some. There’s nothing worse than committing to a library, and then realizing it doesn’t actually do everything you need it to. Make sure you’re committing to a library that’s able to support your application, however it grows!

2. Accessibility

Forms are crucial for developers to get right when it comes to accessibility, since we’re collecting important user information. When a user is unable to complete a form or unable to provide accurate information because the inputs are inaccessible, we’ve not only failed our user by making them deal with a tedious and frustrating experience—we’ve also compromised the reliability and accuracy of the data we’re collecting. That’s a lose-lose for literally everyone involved.

Earlier, I was a little unkind towards the default HTML form elements—they’re antiquated, they’re not easily styled, they’re boring, etc. But I do have to give credit where credit is due, and you know what those default elements do well? Accessibility. Which is why so many developers choose to use them, in spite of their other shortcomings. Accessibility is paramount in forms, so we’ll often fall back on ol’ reliable vs. taking a risk.

With KendoReact Form, you no longer have to feel like you’re making a choice between style and accessibility. Each KendoReact component is not only stylish, but also created following the WAI-ARIA specification, to ensure that they’re all fully accessible. We take accessibility extremely seriously, because we believe that every user deserves a web experience that’s intuitive and inclusive.

1. Consistency

Consistency matters in two different, but equally important contexts: to your users and to your developers.

For your users, it’s important to consider the visual consistency in your application. Ensuring that all your components look similar and function in similar ways allows your users to more quickly learn their way around your software. They can begin to anticipate where things will be and how certain things will look, and this lets them move faster and get more done with less frustration. This is especially important with forms—if you’re using multiple different third-party input components, or some combination of a library and building your own, your users will feel the difference. Each new element you introduce is a new thing they have to navigate successfully in order to get you the information you need ... and if it gets too hard, they simply won’t bother.

The other (less considered) part of consistency is consistency in your code. In a way, your developers are also users—they need to be able to navigate around your application’s codebase quickly and easily, to learn where things will be and how they’ll be structured, in order to get more done with less frustration. Every time you add a new dependency to your project, you increase the complexity for your developers: Onboarding gets longer, refactoring gets harder, and even just creating new features gets more time-consuming.

You can minimize this pain point for both parties by standardizing on one library, and (you guessed it) KendoReact is a great one to choose. With a consistent look and feel for over 100 components, your users will feel the difference immediately. And once your developers have learned how KendoReact works, creating new features is a breeze! Save time, energy and frustration for everyone involved in your application by getting consistent with your tooling.

Conclusion

So, are you convinced? Ready to leave the old ways behind and make your forms easier, more intuitive and more accessible with the KendoReact Form?

You don’t have to take my word for it. Explore our docs, check out our other resources and try it yourself—it’s free for the first 30 days. Just be warned—building forms this easily and quickly is addictive, and you might have trouble going back to how you were working before!