New to KendoReact? Start a free 30-day trial

Field

Component

Represents the Field component that is used inside the KendoReact Form component. It uses name property to access field value and meta information from Form state.

Definition

Package:@progress/kendo-react-form

Properties Interface:FieldProps

Properties

children?

any

Provides child elements that are passed to the rendered component.

Example:

jsx

<Field name="user.name" component="input">
  <span>Additional content</span>
</Field>

colSpan?

number | ResponsiveFormBreakPoint[]

Sets how many columns the field spans in the form layout.

component

string | ComponentType<any>

Can be set to a React component or to the name of an HTML element, for example, input, select, and textarea. The props that are passed to the component are the FieldRenderProps.

Example:

jsx

<Field name="user.name" component="input" />

displayName

string

name

string

Sets the field name in the form state. You can use nested fields like user.age and users[0].name.

Example:

jsx

<Field name="user.age" component="input" />

onChange?

(event: any) => void

Handles changes to the field value.

Use this to update related fields. The Form automatically updates its state when this fires.

Parameters:eventany

Example:

jsx

const handleChange = event => console.log(event);
<Field name="user.name" component="input" onChange={handleChange} />

validator?

FieldValidatorType | FieldValidatorType[]

Validates the field value and returns error messages.

Only synchronous functions are supported. Use useMemo to avoid infinite loops when using an array of validators.

Example:

jsx

const validator = value => value ? "" : "This field is required.";
<Field name="user.email" component="input" validator={validator} />