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) => {
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.
Example
View Source
Change Theme:
