Create Next App

Form

Form component with state management, include data input, validation and layout

When to use

1.Used to create an entity or collect information;
2.Need to validate the user input data.

Basic

Basic usage of Form component


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export default () => {
    const initialValues = { firstName: 'Tony', lastName: 'Stark' }
    const onValueChange = (preValue: any, curValue: any) => {
        console.log(preValue, curValue)
    }
    const onSubmit = (values: any) => {
        console.log(values);
    }
    return (
        <Form
            initialValues={initialValues}
            onValuesChange={onValueChange}
            onSubmit={onSubmit}
        >
            <Stack spacing={2}>
                <Form.Item
                    name="firstName"
                    rules={[{ required: true }]}
                >
                    <TextField label="firstName" placeholder="firstName" />
                </Form.Item>
                <Form.Item
                    name="lastName"
                    rules={[{ required: true }]}
                >
                    <TextField label="lastName" placeholder="lastName" />
                </Form.Item>
                <Form.Submit>
                    <Button variant="contained">submit</Button>
                </Form.Submit>
            </Stack>
        </Form>
    )
}


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export default () => {
    const initialValues = { firstName: 'Tony', lastName: 'Stark' }
    const onValueChange = (preValue: any, curValue: any) => {
        console.log(preValue, curValue)
    }
    const onSubmit = (values: any) => {
        console.log(values);
    }
    return (
        <Form
            initialValues={initialValues}
            onValuesChange={onValueChange}
            onSubmit={onSubmit}
        >
            <Stack spacing={2}>
                <Form.Item
                    name="firstName"
                    rules={[{ required: true }]}
                >
                    <TextField label="firstName" placeholder="firstName" />
                </Form.Item>
                <Form.Item
                    name="lastName"
                    rules={[{ required: true }]}
                >
                    <TextField label="lastName" placeholder="lastName" />
                </Form.Item>
                <Form.Submit>
                    <Button variant="contained">submit</Button>
                </Form.Submit>
            </Stack>
        </Form>
    )
}

Layout

Offer two kinds of layout types, Stack and Grid


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import TextField from '@mui/material/TextField';

export default () => {
    const [layout, setLayout] = React.useState<"Stack" | "Grid">("Stack");
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <ButtonGroup sx={{ marginBottom: '20px' }}>
                <Button
                    onClick={() => setLayout('Stack')}
                    variant={layout === 'Stack' ? 'contained' : 'outlined'}
                >Stack</Button>
                <Button
                    onClick={() => setLayout('Grid')}
                    variant={layout === 'Grid' ? 'contained' : 'outlined'}
                >Grid</Button>
            </ButtonGroup>
            <Form
                layout={layout}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
                gridProps={{
                    containerProps: {
                        container: true,
                        spacing: 2,
                    },
                    itemProps: {
                        item: true,
                        xs: 4
                    }
                }}
            >
                <Form.Item
                    name="firstName"
                >
                    <TextField
                        label="firstName"
                        placeholder="firstName"
                    />
                </Form.Item>
                <Form.Item
                    name="lastName"
                >
                    <TextField
                        label="lastName"
                        placeholder="lastName"
                    />
                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import TextField from '@mui/material/TextField';

export default () => {
    const [layout, setLayout] = React.useState<"Stack" | "Grid">("Stack");
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <ButtonGroup sx={{ marginBottom: '20px' }}>
                <Button
                    onClick={() => setLayout('Stack')}
                    variant={layout === 'Stack' ? 'contained' : 'outlined'}
                >Stack</Button>
                <Button
                    onClick={() => setLayout('Grid')}
                    variant={layout === 'Grid' ? 'contained' : 'outlined'}
                >Grid</Button>
            </ButtonGroup>
            <Form
                layout={layout}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
                gridProps={{
                    containerProps: {
                        container: true,
                        spacing: 2,
                    },
                    itemProps: {
                        item: true,
                        xs: 4
                    }
                }}
            >
                <Form.Item
                    name="firstName"
                >
                    <TextField
                        label="firstName"
                        placeholder="firstName"
                    />
                </Form.Item>
                <Form.Item
                    name="lastName"
                >
                    <TextField
                        label="lastName"
                        placeholder="lastName"
                    />
                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}

Method

Provide Form instance contain many useful methods


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

export default () => {
    const form = Form.useForm();
    const onSubmit = () => {
        form.validates((errors, values) => {
            console.log(errors, values)
        })
    }
    return (
        <Form
            form={form}
            layout="Stack"
            stackProps={{
                direction: 'column',
                spacing: 2,
            }}
        >
            <Form.Item
                name="firstName"
                rules={[{ required: true }]}
            >
                <TextField label="firstName" placeholder="firstName" />
            </Form.Item>
            <Form.Item
                name="lastName"
                rules={[{ required: true }]}
            >
                <TextField label="lastName" placeholder="lastName" />
            </Form.Item>
            <Button variant="contained" onClick={onSubmit}>submit</Button>
        </Form>
    )
}


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

export default () => {
    const form = Form.useForm();
    const onSubmit = () => {
        form.validates((errors, values) => {
            console.log(errors, values)
        })
    }
    return (
        <Form
            form={form}
            layout="Stack"
            stackProps={{
                direction: 'column',
                spacing: 2,
            }}
        >
            <Form.Item
                name="firstName"
                rules={[{ required: true }]}
            >
                <TextField label="firstName" placeholder="firstName" />
            </Form.Item>
            <Form.Item
                name="lastName"
                rules={[{ required: true }]}
            >
                <TextField label="lastName" placeholder="lastName" />
            </Form.Item>
            <Button variant="contained" onClick={onSubmit}>submit</Button>
        </Form>
    )
}

Complex

Flexble way to manage complex form items


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

export default () => {
    const [showPassword, setShowPassword] = React.useState(false);

    const handleClickShowPassword = () => setShowPassword((show) => !show);

    const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();
    };
    return (
        <Form
            layout="Stack"
            stackProps={{
                direction: 'column',
                spacing: 2,
            }}
        >
            <Form.Item
                name="firstName"
                rules={[{ required: true }]}
            >
                {({ value, onChange, error, helperText }) => (
                    <FormControl error={error} variant="outlined">
                        <InputLabel>Password</InputLabel>
                        <OutlinedInput
                            type={showPassword ? 'text' : 'password'}
                            value={value}
                            onChange={onChange}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        onClick={handleClickShowPassword}
                                        onMouseDown={handleMouseDownPassword}
                                        edge="end"
                                    >
                                        {showPassword ? <VisibilityOff /> : <Visibility />}
                                    </IconButton>
                                </InputAdornment>
                            }
                            label="Password"
                        />
                        <FormHelperText>{helperText}</FormHelperText>
                    </FormControl>)}
            </Form.Item>
            <Form.Item
                name="lastName"
                rules={[{ required: true }]}
            >
                {({ value, onChange, error, helperText }) => (
                    <FormControl error={error} variant="outlined">
                        <InputLabel>weight</InputLabel>
                        <OutlinedInput
                            label="weight"
                            value={value}
                            onChange={onChange}
                            endAdornment={<InputAdornment position="end">kg</InputAdornment>}
                        />
                        <FormHelperText>{helperText}</FormHelperText>
                    </FormControl>
                )}
            </Form.Item>
            <Form.Submit>
                <Button variant="contained">submit</Button>
            </Form.Submit>
        </Form>
    )
}


import React from 'react';
import { Form } from '@akamuinsaner/mr-components';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

export default () => {
    const [showPassword, setShowPassword] = React.useState(false);

    const handleClickShowPassword = () => setShowPassword((show) => !show);

    const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();
    };
    return (
        <Form
            layout="Stack"
            stackProps={{
                direction: 'column',
                spacing: 2,
            }}
        >
            <Form.Item
                name="firstName"
                rules={[{ required: true }]}
            >
                {({ value, onChange, error, helperText }) => (
                    <FormControl error={error} variant="outlined">
                        <InputLabel>Password</InputLabel>
                        <OutlinedInput
                            type={showPassword ? 'text' : 'password'}
                            value={value}
                            onChange={onChange}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        onClick={handleClickShowPassword}
                                        onMouseDown={handleMouseDownPassword}
                                        edge="end"
                                    >
                                        {showPassword ? <VisibilityOff /> : <Visibility />}
                                    </IconButton>
                                </InputAdornment>
                            }
                            label="Password"
                        />
                        <FormHelperText>{helperText}</FormHelperText>
                    </FormControl>)}
            </Form.Item>
            <Form.Item
                name="lastName"
                rules={[{ required: true }]}
            >
                {({ value, onChange, error, helperText }) => (
                    <FormControl error={error} variant="outlined">
                        <InputLabel>weight</InputLabel>
                        <OutlinedInput
                            label="weight"
                            value={value}
                            onChange={onChange}
                            endAdornment={<InputAdornment position="end">kg</InputAdornment>}
                        />
                        <FormHelperText>{helperText}</FormHelperText>
                    </FormControl>
                )}
            </Form.Item>
            <Form.Submit>
                <Button variant="contained">submit</Button>
            </Form.Submit>
        </Form>
    )
}

Size

Set the size of form components


import React from 'react';
import { Form, Cascader, TreeSelect } from '@akamuinsaner/mr-components';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import MenuItem from '@mui/material/MenuItem';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Switch from '@mui/material/Switch';

const treeData = [
    {
        id: 'parent 1',
        name: 'parent 1',
        children: [
            {
                id: 'parent 1-0',
                name: 'parent 1-0',
                children: [
                    {
                        id: 'leaf1',
                        name: 'leaf1',
                    },
                    {
                        id: 'leaf2',
                        name: 'leaf2',
                    },
                ],
            },
            {
                id: 'parent 1-1',
                name: 'parent 1-1',
                children: [
                    {
                        id: 'leaf3',
                        name: 'leaf3',
                    },
                ],
            },
        ],
    },
];

export default () => {
    const [size, setSize] = React.useState<"small" | "medium">("medium");
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <ButtonGroup sx={{ marginBottom: '20px' }}>
                <Button
                    onClick={() => setSize('small')}
                    variant={size === 'small' ? 'contained' : 'outlined'}
                >small</Button>
                <Button
                    onClick={() => setSize('medium')}
                    variant={size === 'medium' ? 'contained' : 'outlined'}
                >medium</Button>
            </ButtonGroup>
            <Form
                size={size}
                layout="Stack"
                key={size}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
            >
                <Form.Item
                    name="input"
                >
                    <TextField
                        label="Input"
                        placeholder="Input"
                    />
                </Form.Item>
                <Form.Item
                    name="select"
                >
                    <TextField
                        label="Select"
                        placeholder="Select"
                        select
                    >
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                    </TextField>
                </Form.Item>
                <Form.Item
                    name="cascader"
                >
                    <Cascader
                        options={treeData}
                        label="Cascader"
                        placeholder='Cascader'
                    />
                </Form.Item>
                <Form.Item
                    name="treeSelect"
                >
                    <TreeSelect
                        options={treeData}
                        label="TreeSelect"
                        placeholder='TreeSelect'
                    />
                </Form.Item>
                <Form.Item
                    name="radio"
                >
                    {({ value, onChange }) => (
                        <FormControl>
                            <FormLabel id="demo-radio-buttons-group-label">Radio</FormLabel>
                            <RadioGroup
                                row
                                defaultValue="female"
                                value={value}
                                onChange={onChange}
                            >
                                <FormControlLabel value="female" control={<Radio />} label="Female" />
                                <FormControlLabel value="male" control={<Radio />} label="Male" />
                                <FormControlLabel value="other" control={<Radio />} label="Other" />
                            </RadioGroup>
                        </FormControl>
                    )}
                </Form.Item>
                <Form.Item
                    name="switch"
                    checkable
                >
                    {({ value, onChange }) => (
                        <FormControlLabel control={<Switch
                            value={value}
                            onChange={onChange}
                        />} label="Switch" />
                    )}

                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}


import React from 'react';
import { Form, Cascader, TreeSelect } from '@akamuinsaner/mr-components';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import MenuItem from '@mui/material/MenuItem';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Switch from '@mui/material/Switch';

const treeData = [
    {
        id: 'parent 1',
        name: 'parent 1',
        children: [
            {
                id: 'parent 1-0',
                name: 'parent 1-0',
                children: [
                    {
                        id: 'leaf1',
                        name: 'leaf1',
                    },
                    {
                        id: 'leaf2',
                        name: 'leaf2',
                    },
                ],
            },
            {
                id: 'parent 1-1',
                name: 'parent 1-1',
                children: [
                    {
                        id: 'leaf3',
                        name: 'leaf3',
                    },
                ],
            },
        ],
    },
];

export default () => {
    const [size, setSize] = React.useState<"small" | "medium">("medium");
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <ButtonGroup sx={{ marginBottom: '20px' }}>
                <Button
                    onClick={() => setSize('small')}
                    variant={size === 'small' ? 'contained' : 'outlined'}
                >small</Button>
                <Button
                    onClick={() => setSize('medium')}
                    variant={size === 'medium' ? 'contained' : 'outlined'}
                >medium</Button>
            </ButtonGroup>
            <Form
                size={size}
                layout="Stack"
                key={size}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
            >
                <Form.Item
                    name="input"
                >
                    <TextField
                        label="Input"
                        placeholder="Input"
                    />
                </Form.Item>
                <Form.Item
                    name="select"
                >
                    <TextField
                        label="Select"
                        placeholder="Select"
                        select
                    >
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                    </TextField>
                </Form.Item>
                <Form.Item
                    name="cascader"
                >
                    <Cascader
                        options={treeData}
                        label="Cascader"
                        placeholder='Cascader'
                    />
                </Form.Item>
                <Form.Item
                    name="treeSelect"
                >
                    <TreeSelect
                        options={treeData}
                        label="TreeSelect"
                        placeholder='TreeSelect'
                    />
                </Form.Item>
                <Form.Item
                    name="radio"
                >
                    {({ value, onChange }) => (
                        <FormControl>
                            <FormLabel id="demo-radio-buttons-group-label">Radio</FormLabel>
                            <RadioGroup
                                row
                                defaultValue="female"
                                value={value}
                                onChange={onChange}
                            >
                                <FormControlLabel value="female" control={<Radio />} label="Female" />
                                <FormControlLabel value="male" control={<Radio />} label="Male" />
                                <FormControlLabel value="other" control={<Radio />} label="Other" />
                            </RadioGroup>
                        </FormControl>
                    )}
                </Form.Item>
                <Form.Item
                    name="switch"
                    checkable
                >
                    {({ value, onChange }) => (
                        <FormControlLabel control={<Switch
                            value={value}
                            onChange={onChange}
                        />} label="Switch" />
                    )}

                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}

Disabled

Set form disabled


import React from 'react';
import { Form, Cascader, TreeSelect } from '@akamuinsaner/mr-components';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Switch from '@mui/material/Switch';
import Checkbox from '@mui/material/Checkbox';

const treeData = [
    {
        id: 'parent 1',
        name: 'parent 1',
        children: [
            {
                id: 'parent 1-0',
                name: 'parent 1-0',
                children: [
                    {
                        id: 'leaf1',
                        name: 'leaf1',
                    },
                    {
                        id: 'leaf2',
                        name: 'leaf2',
                    },
                ],
            },
            {
                id: 'parent 1-1',
                name: 'parent 1-1',
                children: [
                    {
                        id: 'leaf3',
                        name: 'leaf3',
                    },
                ],
            },
        ],
    },
];

export default () => {
    const [disabled, setDisabled] = React.useState<boolean>(true);
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <FormControlLabel
                control={<Checkbox
                    checked={disabled}
                    onChange={(e) => setDisabled(e.target.checked)}
                />}
                label="Disabled"
            />
            <Form
                layout="Stack"
                disabled={disabled}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
            >
                <Form.Item
                    name="input"
                >
                    <TextField
                        label="Input"
                        placeholder="Input"
                    />
                </Form.Item>
                <Form.Item
                    name="select"
                >
                    <TextField
                        label="Select"
                        placeholder="Select"
                        select
                    >
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                    </TextField>
                </Form.Item>
                <Form.Item
                    name="cascader"
                >
                    <Cascader
                        options={treeData}
                        label="Cascader"
                        placeholder='Cascader'
                    />
                </Form.Item>
                <Form.Item
                    name="treeSelect"
                >
                    <TreeSelect
                        options={treeData}
                        label="TreeSelect"
                        placeholder='TreeSelect'
                    />
                </Form.Item>
                <Form.Item
                    name="radio"
                >
                    {({ value, onChange }) => (
                        <FormControl>
                            <FormLabel id="demo-radio-buttons-group-label">Radio</FormLabel>
                            <RadioGroup
                                row
                                defaultValue="female"
                                value={value}
                                onChange={onChange}
                            >
                                <FormControlLabel value="female" control={<Radio />} label="Female" />
                                <FormControlLabel value="male" control={<Radio />} label="Male" />
                                <FormControlLabel value="other" control={<Radio />} label="Other" />
                            </RadioGroup>
                        </FormControl>
                    )}
                </Form.Item>
                <Form.Item
                    name="switch"
                    checkable
                >
                    {({ value, onChange }) => (
                        <FormControlLabel control={<Switch
                            value={value}
                            onChange={onChange}
                        />} label="Switch" />
                    )}

                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}


import React from 'react';
import { Form, Cascader, TreeSelect } from '@akamuinsaner/mr-components';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Switch from '@mui/material/Switch';
import Checkbox from '@mui/material/Checkbox';

const treeData = [
    {
        id: 'parent 1',
        name: 'parent 1',
        children: [
            {
                id: 'parent 1-0',
                name: 'parent 1-0',
                children: [
                    {
                        id: 'leaf1',
                        name: 'leaf1',
                    },
                    {
                        id: 'leaf2',
                        name: 'leaf2',
                    },
                ],
            },
            {
                id: 'parent 1-1',
                name: 'parent 1-1',
                children: [
                    {
                        id: 'leaf3',
                        name: 'leaf3',
                    },
                ],
            },
        ],
    },
];

export default () => {
    const [disabled, setDisabled] = React.useState<boolean>(true);
    const onSubmit = (values: any) => console.log(values);
    return (
        <>
            <FormControlLabel
                control={<Checkbox
                    checked={disabled}
                    onChange={(e) => setDisabled(e.target.checked)}
                />}
                label="Disabled"
            />
            <Form
                layout="Stack"
                disabled={disabled}
                onSubmit={onSubmit}
                stackProps={{
                    direction: 'column',
                    spacing: 2,
                }}
            >
                <Form.Item
                    name="input"
                >
                    <TextField
                        label="Input"
                        placeholder="Input"
                    />
                </Form.Item>
                <Form.Item
                    name="select"
                >
                    <TextField
                        label="Select"
                        placeholder="Select"
                        select
                    >
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                    </TextField>
                </Form.Item>
                <Form.Item
                    name="cascader"
                >
                    <Cascader
                        options={treeData}
                        label="Cascader"
                        placeholder='Cascader'
                    />
                </Form.Item>
                <Form.Item
                    name="treeSelect"
                >
                    <TreeSelect
                        options={treeData}
                        label="TreeSelect"
                        placeholder='TreeSelect'
                    />
                </Form.Item>
                <Form.Item
                    name="radio"
                >
                    {({ value, onChange }) => (
                        <FormControl>
                            <FormLabel id="demo-radio-buttons-group-label">Radio</FormLabel>
                            <RadioGroup
                                row
                                defaultValue="female"
                                value={value}
                                onChange={onChange}
                            >
                                <FormControlLabel value="female" control={<Radio />} label="Female" />
                                <FormControlLabel value="male" control={<Radio />} label="Male" />
                                <FormControlLabel value="other" control={<Radio />} label="Other" />
                            </RadioGroup>
                        </FormControl>
                    )}
                </Form.Item>
                <Form.Item
                    name="switch"
                    checkable
                >
                    {({ value, onChange }) => (
                        <FormControlLabel control={<Switch
                            value={value}
                            onChange={onChange}
                        />} label="Switch" />
                    )}

                </Form.Item>
                <Form.Submit>
                    <Button
                        variant="contained"
                    >submit</Button>
                </Form.Submit>
            </Form>
        </>
    )
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Form props

Property	Description	Datatype	Default

Form Instance

Property	Description	Datatype	Default

Form Item