Custom Components

Premium

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.

jsx

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

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <FormElement style={{maxWidth: 650}}>
                    <FieldWrapper>
                        <div className='k-form-field-wrap'>
                            <Field
                                name={'firstName'}
                                label={'First Name'}
                                component={MyCustomInput}
                                labelClassName={'k-form-label'}
                            />
                        </div>
                    <FieldWrapper />
                    <div className="k-form-buttons">
                        <Button type={'submit'} disabled={!formRenderProps.allowSubmit}>
                            Submit
                        </Button>
                    </div>
                </FormElement>
            )}
        />
    );
};
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.

Change Theme

Theme

Loading ...

Suggested Links

• React Form
• API Reference of the Form