import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <Input defaultValue='hi'></Input> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <> <Input placeholder='large' size='large'></Input> <br/><br/> <Input placeholder='default'></Input> <br/><br/> <Input placeholder='small' size='small'></Input> </> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <> <Input defaultValue='enabled input'></Input> <br/> <br/> <Input disabled defaultValue='disbaled input'></Input> </> );

import React from 'react'; import { Input, Typography } from '@douyinfe/semi-ui'; import { IconSearch } from '@douyinfe/semi-icons'; () => ( <> <Input prefix={<IconSearch />} showClear></Input> <br/><br/> <Input prefix="Prefix" showClear></Input> <br/><br/> <Input suffix={<IconSearch />} showClear></Input> <br/><br/> <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input> </> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <Input addonBefore="http://" addonAfter=".com" /> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <Input showClear defaultValue='click to clear'></Input> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <Input mode="password" defaultValue="123456"></Input> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; () => ( <> <Input defaultValue='ies' validateStatus='warning'></Input> <br/><br/> <Input defaultValue='ies' validateStatus='error'></Input> <br/><br/> <Input defaultValue='ies'></Input> </> );

import React from 'react'; import { Input } from '@douyinfe/semi-ui'; class InputDemo extends React.Component { constructor() { super(); this.state = { value: 'controlInput', value2: 'input' }; this.onChange = this.onChange.bind(this); } onChange(value, e) { console.log(value); this.setState({ value }); } render() { return ( <> <Input value={this.state.value} onChange={this.onChange}> </Input> </> ); } }

import React from 'react'; import { Input, InputGroup, InputNumber, Select, AutoComplete, DatePicker } from '@douyinfe/semi-ui'; () => ( <div> <InputGroup> <Input placeholder="Name" style={{ width: 100 }} /> <InputNumber placeholder="Score" style={{ width: 140 }} /> </InputGroup> <br/><br/><br/> <InputGroup size={'small'}> <Select style={{ width: '100px' }} defaultValue='home'> <Select.Option value='home'>Home</Select.Option> <Select.Option value='work'>Work</Select.Option> </Select> <AutoComplete data={['Beijing Haidian']} placeholder='Address: ' style={{ width: 180 }} > </AutoComplete> </InputGroup> <br/><br/><br/> <InputGroup size={'small'}> <Select style={{ width: '100px' }} defaultValue='signup'> <Select.Option value='signup'>Sign Up</Select.Option> <Select.Option value='signin'>Sign In</Select.Option> </Select> <Input placeholder="Email" style={{ width: 180 }} /> </InputGroup> <br/><br/><br/> <InputGroup size={'small'}> <Input placeholder="Name" style={{ width: 100 }} /> <DatePicker placeholder="Birthday" /> </InputGroup> </div> );

import React from 'react'; import { Input, InputGroup, Select, Cascader, TreeSelect } from '@douyinfe/semi-ui'; () => { const treeData = [ { label: 'Asia', value: 'Asia', key: '0', children: [ { label: 'China', value: 'China', key: '0-0', children: [ { label: 'Beijing', value: 'Beijing', key: '0-0-0' }, { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' }, ], }, ], }, { label: 'North America', value: 'North America', key: '1' } ]; return ( <> <InputGroup> <Select style={{ width: 100 }} defaultValue='from'> <Select.Option value='from'>From: </Select.Option> <Select.Option value='to'>To: </Select.Option> </Select> <TreeSelect style={{ width: 220 }} treeData={treeData} placeholder="Please select" /> </InputGroup> <br/><br/> <InputGroup> <Select style={{ width: 100 }} defaultValue='from'> <Select.Option value='from'>From: </Select.Option> <Select.Option value='to'>To: </Select.Option> </Select> <Cascader style={{ width: 220 }} treeData={treeData} placeholder="Please select" /> </InputGroup> </> ); };

import React from 'react'; import { TextArea } from '@douyinfe/semi-ui'; () => ( <div> <TextArea /> <br/><br/> <TextArea maxCount={100} showClear/> </div> );

import React from 'react'; import { TextArea } from '@douyinfe/semi-ui'; () => ( <div> <TextArea autosize rows={1} /> <br/><br/> <TextArea autosize maxCount={100} /> </div> );

import React from 'react'; import { Input, Typography, Form, Button, TextArea } from '@douyinfe/semi-ui'; import GraphemeSplitter from 'grapheme-splitter'; () => { const [value, setValue] = useState(); function getValueLength(str) { if (typeof str === 'string') { const splitter = new GraphemeSplitter(); return splitter.countGraphemes(str); } else { return 0; } } function getTextAreaStrLength(str) { const filteredStr = str.replace(/\s/g, ''); return filteredStr.length; } return ( <div> <h4>maxLength=10</h4> <div> <Typography.Text>Please input following emoji</Typography.Text> <div><Typography.Text copyable>💖</Typography.Text></div> <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div> </div> <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} /> { value && ( <div> <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div> <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div> </div> ) } <br/><br/> <h4>Form.Input + minLength=4</h4> <Form layout="horizontal"> <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} /> <Button type="primary" htmlType="submit">Submit</Button> </Form> <h4>maxCount=10</h4> <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} /> </div> ); };