Telerik blogs
KendoReactT2_1200x303
Learn more about how to create forms in React that have a very good user experience using KendoReact Form.

Forms are present everywhere in modern applications, whether you are building a new store online or creating a newsletter sign-up form, you will definitely need to build and handle forms.

Forms collect information. That is the main reason they are so important and why we should care deeply about them. Forms are a key conversion tool and they will have a huge impact on your final user experience. Having the right strategy in your form can lead to more customer success.

If a user of your website started to fill out your form, you probably have already converted this user. Having a user enter data in your forms requires trust, and if your form doesn’t work correctly, you will possibly lose the trust of your user and the user themselves.

Especially in React, forms have always been a difficult and mysterious part of applications. There are so many options, interactions, and different approaches that can be implemented in forms that sometimes we make silly mistakes while building them.

So, in this article, we are going to learn how we can use the fantastic KendoReact Form component to create great forms in React.

KendoReact Form Component

KendoReact Form is a small and powerful package for form state management in React applications with zero dependencies. It makes our life easier by handling all of our form states and allowing us to handle a few functionalities in our forms, such as custom components, advanced configuration, validation, etc.

With the release of KendoReact 4.0, in order to use the UI packages, we need to download our license key and put it in the root of our project.

First, we install the @progress/kendo-licensing as a dependency in our project:

yarn add @progress/kendo-licensing

Then all we have to do is run the following command to activate our license:

yarn run kendo-ui-license activate

With that, our license key has been activated successfully.react

Let’s get started by installing it with the following command:

yarn add @progress/kendo-react-form

When working with KendoReact Form package, we are going to work with three main components: Form, FormElement and Field.

In order to have a better UI in our form, we are going to install a few more packages:

yarn add @progress/kendo-drawing @progress/kendo-react-buttons @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-theme-default @progress/kendo-react-labels @progress/kendo-react-common

Forms with KendoReact

We are going to create a checkout form using KendoReact Form and see how easy it is to implement a few things such as custom components, validation, etc.

First, we are going to import a few things in our main file:

import React from 'react';
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Input, Checkbox } from '@progress/kendo-react-inputs';
import { Button } from '@progress/kendo-react-buttons';
import '@progress/kendo-theme-default/dist/all.css';

The first thing that we are going to do is create a custom component using the Input component from KendoReact.

Custom Components

Let’s create our custom Input file. We will make our code cleaner and easy to integrate with other things such as field validation in the future. Let’s create a new file called Input and add the following code:

import React from 'react';
import { Input as KendoReactInput } from '@progress/kendo-react-inputs';
import { Label, Error } from '@progress/kendo-react-labels';

const Input = ({
  name,
  label,
  value,
  onChange,
  onBlur,
  visited,
  validationMessage,
  ...props
}) => {
  const editorId = name;

  return (
    <div className="k-form-field">
      <Label editorId={editorId}>{label}</Label>
      <KendoReactInput
        id={editorId}
        className="k-textbox"
        value={value}
        onChange={onChange} 
        onBlur={onBlur}
        {...props}
      />
      {
        visited && validationMessage &&
        (<Error>{validationMessage}</Error>)
      }
    </div>
  );
}
export default Input;

One of the greatest UX errors that we can make when designing forms is to not pass a label attribute to our input component. Katie Sherwin wrote an article called “Placeholders in Form Fields Are Harmful,” in which she explains that inputs that have placeholders replacing labels can be very harmful to accessibility and sometimes cause many negative consequences.

The Input component from KendoReact Form does have support for a label prop and also for many props related to accessibility.

Now that we have our Input custom component, we are going also to create a custom Checkbox component. Let’s create a new file called Checkbox and put the following code inside it:

import React from 'react';
import { Checkbox as KendoReactCheckbox } from '@progress/kendo-react-inputs';

const Checkbox = ({ label, value, onChange, visited, error }) => (
  <div>
    <KendoReactCheckbox label={label} value={value} onChange={onChange} />
  </div>
);

export default Checkbox

Now that we have our two custom components, we can import them in our main file and start to create our form. Here’s how our initial form will look:

import React from 'react';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';
import '@progress/kendo-theme-bootstrap/dist/all.css';
import Input from "./Input";
import Checkbox from "./Checkbox";

const App = () => {
  const handleSubmit = (data) => {
    console.log(data);
  }

  return (
  <Form
    onSubmit={handleSubmit}
    render={({ allowSubmit }) => (
      <FormElement>
        <Field
          name={'firstName'}
          component={Input}
          label={'First name'}
        />

        <Field
          name={'lastName'}
          component={Input}
          label={'Last name'}
        />

        <Field
          name={'cardNumber'}
          component={Input}
          label={'Card number'}
        />

        <Field
          name={'expiryDate'}
          component={Input}
          label={'Expiry date'}
        />

        <Field
          name={'cvv'}
          component={Input}
          label={'CVV'}
        />

        <Field
          name={"email"}
          type={"email"}
          component={Input}
          label={"Email"}
        />

        <Field
          name={"remember"}
          component={Checkbox}
          label={"Remember info"}
        />

        <Button
          type="submit"
          disabled={!allowSubmit}
          primary
        >
          Submit
        </Button>
      </FormElement>
    )}
  />
  );
}

export default App;

Validation

Much of the time, things don’t go as expected inside forms. The user can forget to fill in some field or might have filled in the wrong information. We should find a way to display and show the error in a simple, clear and intuitive way to the user.

The most frustrating experience that your user can have inside a form is not knowing exactly what the error is.

According to Rachel Krause, we should report errors in forms following three simple principles:

  1. The error message should be easy to notice and understand.
  2. The field(s) in error should be easy to locate.
  3. Users shouldn’t have to memorize the instructions for fixing the error.

KendoReact Form has a very nice method of handling validation in forms. The Field component has a prop called validator, which we can pass a synchronous function that returns a boolean value.

The validator prop is responsible for returning the error to us, so we can know which field has been filled by the user.

Let’s create a file called validate, and inside this file we are going to create two simple functions. One function is going to be called validationEmail and it’s going to be used to validate our email field. The other function is going to be called validationField and it’s going to validate our other fields.

const emailRegex = new RegExp(/\S+@\S+\.\S+/);

export const validationEmail = value =>
emailRegex.test(value) ? "" : "Please enter a valid email.";

export const validationField = value => !value ? "Please enter a value" : "";

Now let’s import our validationEmail and validationField functions to our main file. Inside the email field, we are going to pass the validationEmail function in the validator prop, like this:

<Field
  name={"email"}
  type={"email"}
  component={Input}
  label={"Email"}
  placeholder="Email address"
  validator={validationEmail}
/>

For the other fields of our form, we are going to pass the validationField function in the validator prop, like this:

<Field
  name="firstName"
  component={Input}
  label="First name"
  placeholder="Enter your first name"
  validator={validationField}
/>

<Field
  name="lastName"
  component={Input}
  label="Last name"
  placeholder="Enter your last name"
  validator={validationField}
/>

<Field
  name="cardNumber"
  component={Input}
  label="Card number"
  placeholder="Enter your card number"
  validator={validationField}
/>

<Field
  name="expiryDate"
  component={Input}
  label="Expiry date"
  placeholder="Expiry date"
  validator={validationField}
/>

<Field
  name={'cvv'}
  component={Input}
  label={'CVV'}
  placeholder="CVV"
  validator={validationField}
/>

Since we created custom fields such as Input, if we try to submit the form without filling the fields, we will receive a few errors. This means that our custom validation functions are working pretty fine.

Sometimes our forms can get pretty complex, so we need to break them into multiple steps. Multi-step forms can be very helpful and a good alternative to a long and complex form—showing a few inputs at a time can help your user to pay more attention and prevent them from feeling overwhelmed.

If you have ever tried to implement a multi-step form in React, you know how hard it can get sometimes. Multi-step forms implemented the wrong way can create a bunch of complex and poorly built components, and result in an undesirable user experience.

KendoReact Form has a way to implement multi-step forms very easily for when you have a long and complex form and want to break it into smaller steps to create a better experience for your user.

KendoReact Form just makes it easy for us to create forms in React and customize everything we want. It has a range of different components that can help us improve our user experience in all parts of our applications.

Conclusion

Forms are required in every application nowadays. Knowing how to build and maintain them correctly requires time and a lot of research. There are a lot of different UX points that we should pay attention carefully when building our forms in React in order to provide a nice and accessible experience for our users.

KendoReact Form is a very mature and complete UI library for React applications. It contains a lot of different components for different approaches and solutions that might help you to speed up your application and have a more robust and scalable set of components.

TIP: Check out the "KendoReact Form Design Guidelines" for best practices and usage examples for building great forms in React!


Leonardo Maldonado
About the Author

Leonardo Maldonado

Leonardo is a full-stack developer, working with everything React-related, and loves to write about React and GraphQL to help developers. He also created the 33 JavaScript Concepts.

Related Posts

Comments

Comments are disabled in preview mode.