> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/lambda-labs/ux/untitled/ant-design/ant-components.md).

# ANT Components

## Forms <a href="#forms" id="forms"></a>

#### Example Form <a href="#example-form" id="example-form"></a>

* 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 <a href="#ant-design-form" id="ant-design-form"></a>

* 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](https://ant.design/components/grid/):

```
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](https://ant.design/components/form/).

## 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](https://ant.design/docs/react/recommendation) additionally.

### General3

[Button![Button](https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg)](https://ant.design/components/button/)[Icon![Icon](https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg)](https://ant.design/components/icon/)[Typography![Typography](https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg)](https://ant.design/components/typography/)

### Layout4

[Divider![Divider](https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg)](https://ant.design/components/divider/)[Grid![Grid](https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg)](https://ant.design/components/grid/)[Layout![Layout](https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg)](https://ant.design/components/layout/)[Space![Space](https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg)](https://ant.design/components/space/)

### Navigation7

[Affix![Affix](https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg)](https://ant.design/components/affix/)[Breadcrumb![Breadcrumb](https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg)](https://ant.design/components/breadcrumb/)[Dropdown![Dropdown](https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg)](https://ant.design/components/dropdown/)[Menu![Menu](https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg)](https://ant.design/components/menu/)[Pagination![Pagination](https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg)](https://ant.design/components/pagination/)[PageHeader![PageHeader](https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg)](https://ant.design/components/page-header/)[Steps![Steps](https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg)](https://ant.design/components/steps/)

### Data Entry17

[AutoComplete![AutoComplete](https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg)](https://ant.design/components/auto-complete/)[Checkbox![Checkbox](https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg)](https://ant.design/components/checkbox/)[Cascader![Cascader](https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg)](https://ant.design/components/cascader/)[DatePicker![DatePicker](https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg)](https://ant.design/components/date-picker/)[Form![Form](https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg)](https://ant.design/components/form/)[InputNumber![InputNumber](https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg)](https://ant.design/components/input-number/)[Input![Input](https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg)](https://ant.design/components/input/)[Mentions![Mentions](https://gw.alipayobjects.com/zos/alicdn/0pF5j477V/Mentions.svg)](https://ant.design/components/mentions/)[Rate![Rate](https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg)](https://ant.design/components/rate/)[Radio![Radio](https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg)](https://ant.design/components/radio/)[Switch![Switch](https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg)](https://ant.design/components/switch/)[Slider![Slider](https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg)](https://ant.design/components/slider/)[Select![Select](https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg)](https://ant.design/components/select/)[TreeSelect![TreeSelect](https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg)](https://ant.design/components/tree-select/)[Transfer![Transfer](https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg)](https://ant.design/components/transfer/)[TimePicker![TimePicker](https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg)](https://ant.design/components/time-picker/)[Upload![Upload](https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg)](https://ant.design/components/upload/)

### Data Display19

[Avatar![Avatar](https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg)](https://ant.design/components/avatar/)[Badge![Badge](https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg)](https://ant.design/components/badge/)[Comment![Comment](https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg)](https://ant.design/components/comment/)[Collapse![Collapse](https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg)](https://ant.design/components/collapse/)[Carousel![Carousel](https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg)](https://ant.design/components/carousel/)[Card![Card](https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg)](https://ant.design/components/card/)[Calendar![Calendar](https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg)](https://ant.design/components/calendar/)[Descriptions![Descriptions](https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg)](https://ant.design/components/descriptions/)[Empty![Empty](https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg)](https://ant.design/components/empty/)[Image![Image](https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg)](https://ant.design/components/image/)[List![List](https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg)](https://ant.design/components/list/)[Popover![Popover](https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg)](https://ant.design/components/popover/)[Statistic![Statistic](https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg)](https://ant.design/components/statistic/)[Tree![Tree](https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg)](https://ant.design/components/tree/)[Tooltip![Tooltip](https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg)](https://ant.design/components/tooltip/)[Timeline![Timeline](https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg)](https://ant.design/components/timeline/)[Tag![Tag](https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg)](https://ant.design/components/tag/)[Tabs![Tabs](https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg)](https://ant.design/components/tabs/)[Table![Table](https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg)](https://ant.design/components/table/)

### Feedback10

[Alert![Alert](https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg)](https://ant.design/components/alert/)[Drawer![Drawer](https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg)](https://ant.design/components/drawer/)[Modal![Modal](https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg)](https://ant.design/components/modal/)[Message![Message](https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg)](https://ant.design/components/message/)[Notification![Notification](https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg)](https://ant.design/components/notification/)[Progress![Progress](https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg)](https://ant.design/components/progress/)[Popconfirm![Popconfirm](https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg)](https://ant.design/components/popconfirm/)[Result![Result](https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg)](https://ant.design/components/result/)[Spin![Spin](https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg)](https://ant.design/components/spin/)[Skeleton![Skeleton](https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg)](https://ant.design/components/skeleton/)

### Other3

[Anchor![Anchor](https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg)](https://ant.design/components/anchor/)[BackTop![BackTop](https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg)](https://ant.design/components/back-top/)[ConfigProvider![ConfigProvider](https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg)](https://ant.design/components/config-provider/)

GRID:


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/lambda-labs/ux/untitled/ant-design/ant-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.