ant basic usage form

index.tsx

import { useState } from 'react';
import { Form, Input, Button, Checkbox, Card } from 'antd';

export const BasicUsageForm = () => {
  const [date, setDate] = useState<string | undefined>(undefined);

  const onSave = () => {
    console.log(
      JSON.stringify({
        date,
      })
    );
  };

  // moment.Moment
  const onDateOfBirthChanged = (date: any) => {
    setDate(date.format('DD/MM/YYYY'));
  };

  const onFinish = (values: any) => {
    console.log('Success:', JSON.stringify(values));
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Card title="Example form - 001">
      <div>
        <Form
          // [styles]
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          // [settings]
          name="basic"
          initialValues={{ remember: true }}
          autoComplete="off"
          // [events]
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Card>
  );
};

export default BasicUsageForm;