import React from 'react'; import { Flex, Select } from 'antd'; const App: React.FC = () => ( <Flex gap={12} vertical> <Flex gap={8}> <Select value="lucy" disabled variant="filled" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> <Select value="lucy" disabled mode="multiple" variant="filled" placeholder="Outlined" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> </Flex> <Flex gap={8}> <Select value="lucy" status="error" variant="filled" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> <Select value="lucy" status="error" mode="multiple" variant="filled" placeholder="Outlined" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> </Flex> <Flex gap={8}> <Select disabled value="lucy" status="error" variant="filled" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> <Select disabled value="lucy" status="error" mode="multiple" variant="filled" placeholder="Outlined" style={{ flex: 1 }} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, ]} /> </Flex> </Flex> ); export default App;