React Ant Design - Form items to be split into 2 columns

Question

I'm new to Ant Design and wanted to split my form items inside of the Form component into 2 columns on my page. I tried with flex-box and it's not working.

There's this "formItemLayout" function as you can see in my code from their documentation but there's not so info for it. I don't know if I can use it to split them

Is there any way to have them split into 2 halves on the page vertically (like into 2 columns, each taking 50% of the page)

Any help would be appreciate.

import React from "react";

import { Form, Select, InputNumber, Input, Button, Upload, Space } from "antd";

import { UploadOutlined } from "@ant-design/icons";

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 5,
  },
};

const normFile = (e) => {
  console.log("Upload event:", e);

  if (Array.isArray(e)) {
    return e;
  }

  return e && e.fileList;
};

const NewDevicePage = () => {
  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  return (
<div className="fnew-device-page-wrapper">
        <Form name="new-device-form" {...formItemLayout} onFinish={onFinish} hideRequiredMark >
          <Form.Item
            name={["user", "name"]}
            label="Name"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item name={["user", "url"]} label="URL">
            <Input />
          </Form.Item>

          <Form.Item
            name="type"
            label="Type"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the type of your device!",
              },
            ]}
          >
            <Select placeholder="Producer">
              <Option value="producer"> Producer </Option>
              <Option value="consumer"> Consumer </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Price">
            <Form.Item name="price" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item label="Min balance">
            <Form.Item name="min-balance" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            name="device-image"
            label="Device image"
            valuePropName="fileList"
            getValueFromEvent={normFile}
            extra="No file selected"
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button>
                <UploadOutlined /> Select file
              </Button>
            </Upload>
          </Form.Item>

          <Form.Item name={["user", "location"]} label="Location">
            <Input />
          </Form.Item>

          <Form.Item
            name="network"
            label="Network"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the Network",
              },
            ]}
          >
            <Select placeholder="net1">
              <Option value="net1"> Network 1 </Option>
              <Option value="net2"> Network 2 </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Minimum amount">
            <Form.Item name="min-offer-amount" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              span: 12,
              offset: 6,
            }}
          >
            <Button shape="round" type="primary" htmlType="submit">
              Add a device
            </Button>

            <Button shape="round" danger>
              Cancel
            </Button>
          </Form.Item>
        </Form>
      </div>
);
};

export default NewDevicePage;

Answer 1

I have created this sample app with the form component provided in the question. Although this is not well formatted in terms of UX but then it'll help how the form elements can be formatted in 2 columns as per your requirement. Please have a look

I have used Row, Col provided by antd for formatting the form items in 2 columns.

Hope this helps.