import React from 'react'; import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; import { Button, Input, Space } from 'antd'; const App: React.FC = () => { const [passwordVisible, setPasswordVisible] = React.useState(false); return ( <Space direction="vertical"> <Input.Password placeholder="input password" /> <Input.Password placeholder="input password" iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} /> <Space direction="horizontal"> <Input.Password placeholder="input password" visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }} /> <Button style={{ width: 80 }} onClick={() => setPasswordVisible((prevState) => !prevState)}> {passwordVisible ? 'Hide' : 'Show'} </Button> </Space> <Input.Password disabled placeholder="disabled input password" /> </Space> ); }; export default App;