# Form 表单

Tea 表单目前仅提供表单展示层组件，不提供状态管理。可参考示例结合开源方案来进行表单状态管理。

- `Form` 和 `Form.Item` 组件支持表单布局，以及字段状态展示
- `Form.Control` 也可以独立用于字段状态展示
- 我们在 Tea Form 的基础上封装了更高级的、易用的 `ProForm`，补全了 Tea Form 表单状态管理能力，内置大量常用校验规则，同时提供了更多常用的布局设置。 [了解更多>>](http://tea.tencent.com/material/pro-form)


## 使用示例

### 表单布局

[Example: FormLayout](./_example/FormLayoutExample.jsx)

<!-- <Half> -->

### 表单验证

[Example: FormValidation](./_example/FormValidationExample.jsx)

### 只读表单

[Example: FormReadOnly](./_example/FormReadOnlyExample.jsx)

<!-- </Half> -->

## 表单状态管理

Tea 组件本身没有提供表单状态管理能力，可结合一些现有社区实现使用。

<!-- <Half> -->

### React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

https://react-hook-form.com

```
npm install --save react-hook-form
```

[Example: FormWithReactHookForm](./_example/management/FormWithReactHookFormExample.jsx)

### React Final Form

High performance subscription-based form state management for React.

https://github.com/final-form/react-final-form

```
npm install --save react-final-form final-form
```

[Example: FormWithReactFinalForm](./_example/management/FormWithReactFinalFormExample.jsx)

### React Final Form Hooks

Final Form 的 Hooks 版本，可以在不改变组件原有结构的情况下完成状态管理。

https://github.com/final-form/react-final-form-hooks

```
npm install --save react-final-form-hooks final-form
```

[Example: FormWithReactFinalFormHooks](./_example/management/FormWithReactFinalFormHooksExample.jsx)

<!-- </Half> -->

## 组件属性

[Interface: FormProps](./Form.tsx)

[Interface: FormItemProps](./FormItem.tsx)

[Interface: FormControlProps](./FormControl.tsx)