<aside> 💡 The field component is used to create interactive controls for web-based forms in order to accept data from the user

</aside>

How to create a Field in a custom component?

To create any Field, initially need to import Field component and Field types.

import Field from 'Component/Field';
import { FieldType } from 'Component/Field/Field.config';

To know what we should add inside Field component better refer to SPWA core code, there are a lot of examples that can be easily searched.

Here is a simple example. Inside the component create a render function. In our case, we create a checkbox field and then can call renderField in render or any other methods.

Let's take a look at the properties a bit closer:

• Initially, for any input field type, id, and name properties are obligatory.
• events are responsible for callback methods like onChange.
• attr place where passed most of the properties, because if we pass them outside of the object, Field component will not find them. (List of attribute properties can be found here Here)

What are the real examples of this?

Real example of Checkbox Field

• packages/scandipwa/src/component/CheckoutBilling/CheckoutBilling.component.tsx