const configuration = {

}


// OPTIONS 1:

// layouts
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};


// style labelCol, wrapperCol with media point xs: { span: 24 } both form and form item

const props = {}
// FORM  with layouts
{
    name,
    form={form}  // for handling programmatcally
    initialValues,
    ...props // with events
    validateMessages // validation mesage MESSAGE PASSING  1 as generic
}


// Form Items
{
    name,
    label,
    rules // MESSAGE PASSING  2 as specific
    shouldUpdate


    // error handling
    validateStatus
    help
    // render props 
}

// Form.List

{
    // render props   {(fields, { add, remove }) => {}}
}

// Children
{
    type, // Input, Checkbox, Button, Children
}


// functional
const [form] = Form.useForm();
form.setFieldsValue({ note: "Hi, man!" });
form.getFieldValue()


//Control between forms
<Form.Provider onFormFinish={(name, { values, forms }) => {}}></Form.Provider>



// dynamic validation
form.validateFields(['nickname']); // single
await form.validateFields(); // all






// IMPORTANT FIELDS:
// Form
{
    fields: FieldData // for dynamic form 
    onFieldsChange={(changedFields, allFields) => {
        onChange(allFields);
    }}
}