mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { InfoCircleOutlined } from '@ant-design/icons';
|
||
|
import { Button, Form, Input, Radio } from 'antd';
|
||
|
|
||
|
type RequiredMark = boolean | 'optional';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [form] = Form.useForm();
|
||
|
const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
|
||
|
|
||
|
const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {
|
||
|
setRequiredMarkType(requiredMarkValue);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Form
|
||
|
form={form}
|
||
|
layout="vertical"
|
||
|
initialValues={{ requiredMarkValue: requiredMark }}
|
||
|
onValuesChange={onRequiredTypeChange}
|
||
|
requiredMark={requiredMark}
|
||
|
>
|
||
|
<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" required tooltip="This is a required field">
|
||
|
<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>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|