# FormControl 设计

FormControl 用于控制 label、Input、HelpText、ErrorText 等信息的显示。

```react
<FormControl
  label="标签"
  control={<Input />}
  helpText="请输入xxx"
  validateText="错误提示"
  validateState="error"
  inline
  vertical
/>
```

最小高度： 48px

属性说明：

* **label** - 标签。可以是字符串或者 function。
* **control** - 表单控件。支持 node 或者 function。
* **helpText** - 帮助性文字。
* **validateText** - 验证结果文本。
* **validateState** - 验证类型。选项有：error，warning，validating，success。
* **colon** - 是否显示 label 后的冒号。
* **required** - 是否显示 label 的\*。
* **labelStyle** - 给 label 设置样式。
* **labelClassName** - 给 label 设置类名。
* **labelWidth** - 默认为 120px。
* **inline** - 是否为行内元素。
* **vertical** - 决定 label 与 control 为上下布局。默认为 false，label 与 control 为左右布局。
* **labelAlign** - 决定 label 的对齐方式，左对齐(left)、右对齐(right)、居中对齐(center)。默认为右对齐。

当 validateState 为 error 或者 warning 时，label 和 control 的颜色也发生变化。

给`Input`、`Select`等组件添加后置图标。

## label 的宽度控制

有以下几种途径：

* 通过`labelWidth`定义 label 的宽度。
* 通过 `labelStyle`定义 label 的宽度。
* 通过`labelClassName`定义 label 的宽度。
* 通过`label`自定义渲染来定义 label 的宽度。

## label 与 control 之间的布局控制

默认为左右布局。添加`vertical`属性后，则为  垂直布局。

## inline

FormControl 默认为块级元素。可以通过`inline`属性控制为  行内元素。