Ant Design Form Example - Ant-design Typing CST Test

Ant Design Form Example — Ant-design Code

Shows a basic form with input fields and submit button using Ant Design.

import React from 'react';
import { Form, Input, Button } from 'antd';

const FormExample = () => {
	const onFinish = values => console.log('Form values:', values);
	return (
		<div style={{ maxWidth: 400, margin: '50px auto' }}>
		<Form onFinish={onFinish} layout='vertical'>
		<Form.Item label='Name' name='name' rules={[{ required: true, message: 'Please enter your name' }]}>
		<Input />
		</Form.Item>
		<Form.Item label='Email' name='email' rules={[{ required: true, type: 'email', message: 'Please enter a valid email' }]}>
		<Input />
		</Form.Item>
		<Form.Item>
		<Button type='primary' htmlType='submit'>Submit</Button>
		</Form.Item>
		</Form>
		</div>
	);
};

export default FormExample;

Ant-design Language Guide

Ant Design (AntD) is a comprehensive, enterprise-class UI design system and React component library for building modern web applications. It provides high-quality prebuilt components, design guidelines, and a unified visual language.

More Ant-design Typing Exercises

Practice Other Languages