diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 3f01964ebe..7cca87e5bf 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -82,6 +82,11 @@ export default class FormItem extends React.Component {
     ) : null;
   }
 
+  renderExtra() {
+    const { prefixCls, extra } = this.props;
+    return <div className={prefixClsFn(prefixCls, 'extra')}>{extra}</div>;
+  }
+
   getValidateStatus() {
     const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
     const field = this.getId();
@@ -178,7 +183,7 @@ export default class FormItem extends React.Component {
         this.renderValidateWrapper(
           children,
           this.renderHelp(),
-          props.extra
+          this.renderExtra(),
         )
       ),
     ];
diff --git a/style/components/form.less b/style/components/form.less
index cc4a7dd1f4..1bda3a0b49 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -102,6 +102,11 @@ input[type="checkbox"] {
   margin-top: 3px;
 }
 
+.@{css-prefix}form-explain,
+.@{css-prefix}form-extra {
+  color: #999;
+}
+
 .@{css-prefix}form-text {
   display: inline-block;
   padding-right: 8px;