New to KendoReact? Start a free 30-day trial

FormProps

Interface

Contains the props for the KendoReact Form component.

Definition

Package:@progress/kendo-react-form

Properties

errors?

{ [name: string]: string }

Validation errors that override field and form validators.

Provides validation errors directly as an object, unlike the validator prop which expects a callback. When both validator and errors exist for a field, the errors prop takes precedence.

Example:

jsx

const [errors, setErrors] = useState({});
const handleSubmit = async (data) => {
    const response = await submitToServer(data);
    if (response.errors) {
        setErrors(response.errors);
    }
};
<Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />

ignoreModified?

boolean

Allows the form to submit even when no fields have been modified.

Example:

jsx

<Form ignoreModified={true} render={props => <form>form content </form>} />

initialValues?

{ [name: string]: any }

Sets the starting values for form fields.

Set initial values to prevent errors when switching from uncontrolled to controlled mode.

Example:

jsx

const initialValues = { user: { name: '', age: 0 } };
<Form initialValues={initialValues} render={props => <form>form content</form>} />

onChange?

(fieldName: string, value: any, valueGetter: (name: string) => any) => void

Fires each time any field value changes.

The third parameter valueGetter allows accessing other field values, useful for cross-field validation or clearing related errors.

Parameters:fieldNamestringvalueanyvalueGetter(name: string) => any

Example:

jsx

const handleChange = (fieldName, value, valueGetter) => {
    // For nested fields like 'user.name', access related fields like 'user.email'
    if (fieldName === 'user.name') {
        const email = valueGetter('user.email');
        console.log('Name changed:', value, 'Email is:', email);
    }
    // Clear error for the changed field
    if (formErrors[fieldName]) {
        setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
    }
};
<Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />

onSubmit?

(values: { [name: string]: any }, event: SyntheticEvent<any, Event>) => void

Handles form submission when validation passes and fields are modified.

Fires when at least one field is modified, the user clicks Submit, and validation passes.

Parameters:values{ [name: string]: any }event?SyntheticEvent<any, Event>

Example:

jsx

const handleSubmit = (values, event) => console.log(values);
<Form onSubmit={handleSubmit} render={props => <form> form content </form>} />

onSubmitClick?

(event: FormSubmitClickEvent) => void

Handles every submit button click, even when the form is invalid or unchanged.

Use this for advanced scenarios where you need to handle all submit events.

Parameters:eventFormSubmitClickEvent

Example:

jsx

const handleSubmitClick = event => console.log(event);
<Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />

render

Renders the form content using the provided render function.

Parameters:propsFormRenderPropsReturns:

any

Example:

jsx

const renderForm = props => <form> form content </form>;
<Form render={renderForm} />

validator?

FormValidatorType

Validates the entire form and returns error messages.

Return a key-value pair where the key is the field path and the value is the error message. You can validate nested fields like 'users[0].name'. Only synchronous functions are supported.

Example:

jsx

const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
<Form validator={validator} render={props => <form> form content </form>} />

webMcp?

boolean | WebMcpProps

Enables browser-native AI agent tools via Web MCP (Chrome 146+).

Pass true for defaults or an object for fine-grained control. AI agents are multilingual — dataName accepts any language.

Example:

tsx

// Boolean: generic "form" label
<Form webMcp render={props => <FormElement>...</FormElement>} />

// Config object: explicit name
<Form webMcp={{ dataName: 'employee' }} render={props => <FormElement>...</FormElement>} />