diff --git a/packages/app/src/components/form.fields/number-picker/index.tsx b/packages/app/src/components/form.fields/number-picker/index.tsx
index dc41f9415..1dc6bb5c6 100644
--- a/packages/app/src/components/form.fields/number-picker/index.tsx
+++ b/packages/app/src/components/form.fields/number-picker/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { connect } from '@formily/react-schema-renderer'
 import { InputNumber } from 'antd'
 import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared'
@@ -7,4 +8,15 @@ export const NumberPicker = connect({
   getComponent: mapTextComponent
 })(acceptEnum(InputNumber))
 
+export const Percent = connect({
+  getProps: mapStyledProps,
+  getComponent: mapTextComponent
+})(acceptEnum((props) => (
+  <InputNumber 
+    formatter={value => value ? `${value}%` : ''}
+    parser={value => value.replace('%', '')}
+    {...props}
+  />
+)))
+
 export default NumberPicker
diff --git a/packages/app/src/components/form.fields/registry.ts b/packages/app/src/components/form.fields/registry.ts
index 2badc2b5d..d4ca69231 100644
--- a/packages/app/src/components/form.fields/registry.ts
+++ b/packages/app/src/components/form.fields/registry.ts
@@ -7,7 +7,7 @@ import { ArrayTable } from './array-table'
 import { Checkbox } from './checkbox'
 import { DatePicker } from './date-picker'
 import { Input } from './input'
-import { NumberPicker } from './number-picker'
+import { NumberPicker, Percent } from './number-picker'
 import { Password } from './password'
 import { Radio } from './radio'
 import { Range } from './range'
@@ -34,6 +34,7 @@ export const setup = () => {
     string: Input,
     textarea: Input.TextArea,
     number: NumberPicker,
+    percent: Percent,
     password: Password,
     radio: Radio.Group,
     range: Range,