index.tsx

import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, Radio, Card } from 'antd';
import { useState } from 'react';

type RequiredMark = boolean | 'optional';

export const OptionalForm = () => {
  const [form] = Form.useForm();

  const [requiredMark, setRequiredMarkType] = useState<boolean | 'optional'>(
    'optional'
  );

  const onFormChange = ({
    requiredMarkValue,
  }: {
    requiredMarkValue: RequiredMark;
  }) => {
    console.log('requiredMarkValue', requiredMarkValue);


    setRequiredMarkType(requiredMarkValue);
  };

  return (
    <Card title="Example form - 003 - optional">
      <div>
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            requiredMarkValue: requiredMark,
          }}
          onValuesChange={onFormChange}
          requiredMark={'optional'}
        >
          <Form.Item label="Required Mark" name="requiredMarkValue">
            <Radio.Group>
              <Radio.Button value="optional">Optional</Radio.Button>
              <Radio.Button value>Required</Radio.Button>
              <Radio.Button value={false}>Hidden</Radio.Button>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="Field A"
            tooltip="This is a required field"
            required
          >
            <Input placeholder="input placeholder" />
          </Form.Item>

          <Form.Item
            label="Field B"
            
            // tooltip={{
            //   title: 'Tooltip with customize icon',
            //   icon: <InfoCircleOutlined />,
            // }}
          >
            <Input placeholder="input placeholder" />
          </Form.Item>

          <Form.Item>
            <Button type="primary">Submit</Button>
          </Form.Item>
        </Form>
      </div>
    </Card>
  );
};

export default OptionalForm;