Build Elegant UI Interface with React Ant Design Form Component

Ant Design form is a React UI library that has abundance of easy-to-use components that are useful for building elegant user interfaces.

One of the components is <Form>. It provides built-in functions for collect, validate and submit user input. <Form> in Ant Design is using a decorator pattern for the fields. This is not a problem until you want to separate the form and fields.

Here is a simple example.

1import { Form, Input, Button, Checkbox } from 'antd';
2
3const layout = {
4  labelCol: {
5    span: 8,
6  },
7  wrapperCol: {
8    span: 16,
9  },
10};
11const tailLayout = {
12  wrapperCol: {
13    offset: 8,
14    span: 16,
15  },
16};
17
18const Demo = () => {
19  const onFinish = values => {
20    console.log('Success:', values);
21  };
22
23  const onFinishFailed = errorInfo => {
24    console.log('Failed:', errorInfo);
25  };
26
27  return (
28	<code>
29    <Form
30      {...layout}
31      name="basic"
32      initialValues={{
33        remember: true,
34      }}
35      onFinish={onFinish}
36      onFinishFailed={onFinishFailed}
37    >
38      <Form.Item
39        label="Username"
40        name="username"
41        rules={[
42          {
43            required: true,
44            message: 'Please input your username!',
45          },
46        ]}
47      >
48        <Input />
49      </Form.Item>
50
51      <Form.Item
52        label="Password"
53        name="password"
54        rules={[
55          {
56            required: true,
57            message: 'Please input your password!',
58          },
59        ]}
60      >
61        <Input.Password />
62      </Form.Item>
63
64      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
65        <Checkbox>Remember me</Checkbox>
66      </Form.Item>
67
68      <Form.Item {...tailLayout}>
69        <Button type="primary" htmlType="submit">
70          Submit
71        </Button>
72      </Form.Item>
73    </Form>
74    </code>
75  );
76};
77
78ReactDOM.render(<Demo />, mountNode);

Getting Started

In this tutorial, we’ll build a basic application to showcase Ant Design's react form component. Our first step will be to set up our boilerplate. I’ve done so using create-react-app.

Then we’ll need to add the antd dependency to the project:

1yarn add antd

1npm i antd

Before we start building our <CustomForm /> component, we’ll add a reference to it in the root component:

1import React from "react";
2import ReactDOM from "react-dom";
3import Todo from "./todo";
4
5import "./styles.css";
6
7function App() {
8  return (
9    <div className="App">
10      <CustomForm />
11    </div>
12  );
13}
14
15const rootElement = document.getElementById("root");
16ReactDOM.render(<App />, rootElement);

Building the CustomForm Component

Now we can start building our <CustomForm /> component. Open a new file called CustomForm.js with the following contents:

1import { Form, Input, Button, Checkbox } from 'antd';
2
3const CustomForm = () => {
4  return (
5    <Form
6      name="basic"
7      initialValues={{
8        remember: true,
9      }}
10    >
11      <Form.Item
12        label="Username"
13        name="username"
14        rules={[
15          {
16            required: true,
17            message: 'Please input your username!',
18          },
19        ]}
20      >
21        <Input />
22      </Form.Item>
23
24      <Form.Item
25        label="Password"
26        name="password"
27        rules={[
28          {
29            required: true,
30            message: 'Please input your password!',
31          },
32        ]}
33      >
34        <Input.Password />
35      </Form.Item>
36
37      <Form.Item name="remember" valuePropName="checked">
38        <Checkbox>Remember me</Checkbox>
39      </Form.Item>
40
41      <Form.Item>
42        <Button type="primary" htmlType="submit">
43          Submit
44        </Button>
45      </Form.Item>
46    </Form>
47  );
48};

Cool! Now let’s add layout and submit method in our component.

1import { Form, Input, Button, Checkbox } from 'antd';
2
3const layout = {
4  labelCol: {
5    span: 8,
6  },
7  wrapperCol: {
8    span: 16,
9  },
10};
11const tailLayout = {
12  wrapperCol: {
13    offset: 8,
14    span: 16,
15  },
16};
17
18const Demo = () => {
19  const onFinish = values => {
20    console.log('Success:', values);
21  };
22
23  const onFinishFailed = errorInfo => {
24    console.log('Failed:', errorInfo);
25  };
26
27  return (
28    <Form
29      {...layout}
30      name="basic"
31      initialValues={{
32        remember: true,
33      }}
34      onFinish={onFinish}
35      onFinishFailed={onFinishFailed}
36    >
37      <Form.Item
38        label="Username"
39        name="username"
40        rules={[
41          {
42            required: true,
43            message: 'Please input your username!',
44          },
45        ]}
46      >
47        <Input />
48      </Form.Item>
49
50      <Form.Item
51        label="Password"
52        name="password"
53        rules={[
54          {
55            required: true,
56            message: 'Please input your password!',
57          },
58        ]}
59      >
60        <Input.Password />
61      </Form.Item>
62
63      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
64        <Checkbox>Remember me</Checkbox>
65      </Form.Item>
66
67      <Form.Item {...tailLayout}>
68        <Button type="primary" htmlType="submit">
69          Submit
70        </Button>
71      </Form.Item>
72    </Form>
73  );
74};
75
76ReactDOM.render(<Demo />, mountNode);

Click on submit button and this is the output you get

Success:

1{username: "preyash", password: "preyash", remember: true}

That's how easy it is to make a form with Ant design. If you’d like to learn more about Ant, check out their docs.

Ant Design Form component for seamless conduct

Getting Started

Building the CustomForm Component

Related Post

Quick & Easy MobX Tutorial in ReactNative - Beginner Steps

Free React App Deployment with Heroku and CD

Selenium: Beginner's Guide for Automation Testing