---
title: Form - 表单
nav:
title: RN 组件
path: /react-native
group:
title: 表单组件
path: /form
---
# Form 表单
对`rc-field-form`的封装，提供类似 antd Form 的效果
## 效果演示
### 1. FormItem 使用
```tsx | pure
import { Form } from '@td-design/react-native';
// ...other imports
const { FormItem, FormListItem, useForm } = Form;
export default function FormDemo() {
const [form] = useForm();
return (
);
}
```
### 2. FormListItem 使用
```tsx | pure
import { Form } from '@td-design/react-native';
// ...other imports
const { FormItem, FormListItem, useForm } = Form;
export default function FormDemo() {
const [form] = useForm();
return (
);
}
```
### 3. 校验失败提示效果
```tsx | pure
import { Form } from '@td-design/react-native';
// ...other imports
const { FormItem, FormListItem, useForm } = Form;
export default function FormDemo() {
const [form] = useForm();
return (
);
}
```
## API
### Form API
```ts
import { FormProps as RcFormProps } from 'rc-field-form/es/Form';
export type FormProps = Omit & {
/** 表单项的高度 */
formItemHeight?: number;
/** 是否显示边框线 */
bordered?: boolean;
};
```
### FormItem API
```ts
import type { FieldProps } from 'rc-field-form/lib/Field';
type RcFieldProps = Omit;
export interface FormItemProps extends RcFieldProps {
/** 保持组件原始样式 */
noStyle?: boolean;
/** 子组件 */
children: ReactElement;
}
```
### FormListItem API
```ts
import type { FieldProps } from 'rc-field-form/lib/Field';
import { ListItemProps } from '../list-item';
type RcFieldProps = Omit;
export interface FormListItemProps
extends RcFieldProps,
Pick {
noStyle?: boolean;
children: ReactElement;
}
```
### 哪些组件应该作为 FormItem 的 children
- Input
- TextArea
- CountDown
- NumberKeyboardInput
- VehicleKeyboardInput
- DatePickerInput
- DatePeriodInput
- PickerInput
### 哪些组件应该作为 FormListItem 的 children
- InputItem
- CountDownItem
- Radio
- Checkbox
- Stepper
- Slider
- Switch
- NumberKeyboardItem
- VehicleKeyboardItem
- DatePickerItem
- PickerItem
### 使用代码示例
```tsx | pure
```