ANT Components

Forms

Example Form

• Here's an example of building a basic form using our reusable FormInput & FormButton components. You can use these to build out different types of forms throughout your application:

import { FormInput, FormButton } from './components/common';<form onSubmit={handleSubmit}>  <FormInput placeholder="Email" name="email" labelId="User Email" />  <FormButton buttonText="Submit" classType="default" disabled="false" /></form>Copy

• Note that we are importing our components from ./components/common. This is the directory where any of your custom reusable components should live.

Ant Design Form

• Here's is an example of creating a basic form using Ant Design components:

import { Form, Input, Button } from 'antd';<Form onFinish={handleSubmit}>  <Form.Item    label="My Input"  >    <Input />  </Form.Item>  <Form.Item>    <Button type="primary" htmlType="submit">      Submit    </Button>  </Form.Item></Form>Copy

• Note that each child component of the form needs to be wrapped in a Form.Item component for Ant Design's layout to work.

• To customize the layout of our form we can create a layout object and make use of Ant Design's grid system:

const layout = {   // This specifies how wide we want our form container (wrapper) to be,   // where a span of 24 is equivalent to 100%.    wrapperCol: {      span: 8,    }  };  // To use our layout we can spread our layout object on our Form component:  <Form onFinish={handleSubmit} {...layout}>  <Form.Item    label="My Input"  >    <Input />  </Form.Item>  <Form.Item>    <Button type="primary" htmlType="submit">      Submit    </Button>  </Form.Item></Form>Copy

• You can also specify the grid layouts for each Form.Item component:

const itemLayout = {  wrapperCol: { offset: 4, span: 8 },}<Form onFinish={handleSubmit} {...layout}>  <Form.Item    label="My Input"  >    <Input />  </Form.Item>  <Form.Item {...itemLayout}>    <Button type="primary" htmlType="submit">      Submit    </Button>  </Form.Item></Form>Copy

• Adding form validation with Ant Design is really simple! We can specify a rules array with an error type and the message we would like to display on that error:

const myRules = [  {    required: true,    message: 'Please input your email!',  },  {    type: 'email',    message: 'Please enter a valid email',  },];<Form onFinish={handleSubmit} {...layout}>  <Form.Item    label="Email"    name="email"    rules={myRules}  >    <Input />  </Form.Item>  <Form.Item {...itemLayout}>    <Button type="primary" htmlType="submit">      Submit    </Button>  </Form.Item></Form>Copy

• Note that we have to add a name prop to our input in order for our validation rules to take effect.

• For more detail on using the Ant Design Form component check out the Ant Design Docs.

Components Overview

antd provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great Third-Party Libraries additionally.

General3

ButtonIconTypography

Layout4

DividerGridLayoutSpace

Navigation7

AffixBreadcrumbDropdownMenuPaginationPageHeaderSteps

Data Entry17

AutoCompleteCheckboxCascaderDatePickerFormInputNumberInputMentionsRateRadioSwitchSliderSelectTreeSelectTransferTimePickerUpload

Data Display19

AvatarBadgeCommentCollapseCarouselCardCalendarDescriptionsEmptyImageListPopoverStatisticTreeTooltipTimelineTagTabsTable

Feedback10

AlertDrawerModalMessageNotificationProgressPopconfirmResultSpinSkeleton

Other3

AnchorBackTopConfigProvider

GRID: