Skip to content

Instantly share code, notes, and snippets.

@romelgomez
Created February 23, 2023 14:37
Show Gist options
  • Save romelgomez/cd4ad59f89471425930d46391fd73f0a to your computer and use it in GitHub Desktop.
Save romelgomez/cd4ad59f89471425930d46391fd73f0a to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment