Getting Started with Forms

The HTML5 form element supports the validation of inputs that is based on a set of pre-defined rules.

All inputs get validated upon form submission and if the validation fails, the form submission is prevented. Out of the box, KendoReact delivers components which support the HTML5 form validation and also provide props for configuring a set of minimal requirements for a component to be in a valid state.

You can use the KendoReact components which provide forms support in the following scenarios:

Preventing Form Submission

Whenever the validity state of a component is invalid, the form submission gets prevented. The prevention of form submission enables you to achieve the same behavior as the native HTML form elements (such as input and select) and to avoid the explicit verification of the validity state in the onSubmit event handler.

The following example demonstrates how to prevent the form submission by passing the required prop to a component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Input } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Button } from '@progress/kendo-react-buttons';

import { countries } from './countries';

class App extends React.Component {
    constructor(props) {

        this.state = {
            success: false
    render() {
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                    <legend>Your Form:</legend>
                                    <label className="k-form-field">
                                        <span>A required Input</span>
                                <span>A required DropDownList</span>
                                    style={{ width: '100%' }}
                                <Button className="mt-3" type="submit" primary={true}>Submit</Button>
                {this.state.success && (
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                        Form submitted!

    handleSubmit = (event) => {
        this.setState({ success: true });
        setTimeout(() => {
 this.setState({ success: false });
}, 3000);

    <App />,