diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 8d5237109c..ef1de8f545 100644
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -14,6 +14,7 @@ export default class Form extends React.Component {
static propTypes = {
prefixCls: React.PropTypes.string,
+ vertical: React.PropTypes.bool,
horizontal: React.PropTypes.bool,
inline: React.PropTypes.bool,
children: React.PropTypes.any,
@@ -31,9 +32,10 @@ export default class Form extends React.Component {
}
render() {
- const { prefixCls, className, inline, horizontal } = this.props;
+ const { prefixCls, className, inline, horizontal, vertical } = this.props;
const formClassName = classNames({
[`${prefixCls}-horizontal`]: horizontal,
+ [`${prefixCls}-vertical`]: vertical,
[`${prefixCls}-inline`]: inline,
[className]: !!className,
});
@@ -43,6 +45,7 @@ export default class Form extends React.Component {
'className',
'inline',
'horizontal',
+ 'vertical',
'form',
]);
diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
index 6264b189ea..225d4c868f 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -62,7 +62,7 @@ let Demo = React.createClass({
Sold myself to Hua palace }
+ label={Sold myself }
>
agree
diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md
index ce3498ea99..92aa9a52df 100644
--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@@ -145,19 +145,12 @@ let Demo = React.createClass({
validator: this.checkPass2,
}],
});
- const formItemLayout = {
- labelCol: { span: 6 },
- wrapperCol: { span: 18 },
- };
return (
-
);
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index f38e6fa254..d5b68f2f16 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -37,7 +37,8 @@ A form field is defined using ``.
| Property | Description | Type | Default Value |
|-----------|------------------------------------------|------------|---------|
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
-| horizontal | Use horizontal alignment. | boolean | false |
+| vertical | Use vertical layout. | boolean | false |
+| horizontal | Use horizontal layout. | boolean | false |
| inline | Use inline alignment. | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
| prefixCls | Set the CSS class name of form component (optional). | string | 'ant-form' |
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 9c5ec318db..93207469cd 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -39,6 +39,7 @@ english: Form
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
+| vertical | 垂直排列布局 | boolean | false |
| horizontal | 水平排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 88575acaff..048361e237 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -226,6 +226,18 @@ form {
}
}
+// Form layout
+//== Vertical Form
+.@{form-prefix-cls}-vertical {
+ .@{form-prefix-cls}-item-label {
+ padding: 0 0 8px;
+
+ label:after {
+ content: '';
+ }
+ }
+}
+
//== Inline Form
.@{form-prefix-cls}-inline {
.@{form-prefix-cls}-item {