Custom Components

You can render custom components in the KendoReact Field component by using the built-in properties of the FieldRenderProps interface and any custom properties.

Using Basic Properties

You can get the Form state for the current field and trigger changes for it by using the value and onChange properties of the FieldRenderProps interface.

const MyCustomInput = (fieldRenderProps) => {
    return (
        <Input value={fieldRenderProps.value} onChange={fieldRenderProps.onChange} />
    );
};

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
                    <Field name={'firstName'} component={MyCustomInput} />
                    <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                        Submit
                    </button>
                </form>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting Custom Behavior

You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.

The following example demonstrates how to render a required custom checkbox a terms agreement.

const MyCustomCheckbox = (fieldRenderProps) => {
    const {
        // The meta props of the Field.
        validationMessage, touched, visited, modified, valid,
        // The input props of the Field.
        value, onChange, onFocus, onBlur,
        // The custom props that you passed to the Field.
        ...others
    } = fieldRenderProps;

    const onValueChange = React.useCallback(
        () => {
            // onChange callback expects argument with 'value' property
            onChange({value: !value});
        },
        [onChange, value]
    );

    return (
        <div onFocus={onFocus} onBlur={onBlur}>
            <input
                type={'checkbox'}
                className={'k-checkbox'}
                onChange={onValueChange}
                checked={value}
                id={others.id}
            />
            <label
                className={'k-checkbox-label'}
                htmlFor={others.id}
            >
                {others.label}
            </label>
            {
                // Display an error message after the "visited" or "touched" field is set to true.
                (visited && validationMessage) && (
                    <div className={'k-required'}>
                        {validationMessage}
                    </div>
                )
            }
        </div>
    );
};

const requiredValidator = (value) => value ? '' : 'This field is required.';

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            initialValues={{termsAccepted: false}}
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
                    <Field
                        name={'termsAccepted'}
                        label={'I Agree with terms & conditions'}
                        id={'termsinput'}
                        component={MyCustomCheckbox}
                        validator={requiredValidator}
                    />
                    <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                        Submit
                    </button>
                </form>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);