diff --git a/packages/client/src/schema-component/antd/index.ts b/packages/client/src/schema-component/antd/index.ts
index 991032dd6a..556555fd62 100644
--- a/packages/client/src/schema-component/antd/index.ts
+++ b/packages/client/src/schema-component/antd/index.ts
@@ -8,6 +8,7 @@ export * from './form';
 export * from './form-item';
 export * from './grid';
 export * from './input';
+export * from './input-number';
 export * from './password';
 export * from './radio';
 export * from './menu';
\ No newline at end of file
diff --git a/packages/client/src/schema-component/antd/input-number/InputNumber.tsx b/packages/client/src/schema-component/antd/input-number/InputNumber.tsx
new file mode 100644
index 0000000000..9a874431e3
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/InputNumber.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { connect, mapReadPretty } from '@formily/react';
+import { InputNumber as AntdNumber } from 'antd';
+import { ReadPretty } from './ReadPretty';
+
+export const InputNumber = connect(AntdNumber, mapReadPretty(ReadPretty));
+
+export default InputNumber;
diff --git a/packages/client/src/schema-component/antd/input-number/ReadPretty.tsx b/packages/client/src/schema-component/antd/input-number/ReadPretty.tsx
new file mode 100644
index 0000000000..279f41b179
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/ReadPretty.tsx
@@ -0,0 +1,21 @@
+import { isValid } from '@formily/shared';
+import type { InputProps } from 'antd/lib/input';
+import type { InputNumberProps } from 'antd/lib/input-number';
+import { toFixed } from 'rc-input-number/lib/utils/MiniDecimal';
+import { getNumberPrecision } from 'rc-input-number/lib/utils/numberUtil';
+import React from 'react';
+
+export const ReadPretty: React.FC<InputProps & InputNumberProps> = (props: any) => {
+  const { step, value, addonBefore, addonAfter } = props;
+  if (!isValid(props.value)) {
+    return <div></div>;
+  }
+  const precision = Math.max(getNumberPrecision(String(value)), getNumberPrecision(step));
+  return (
+    <div>
+      {addonBefore}
+      {toFixed(String(value), '.', precision)}
+      {addonAfter}
+    </div>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/input-number/demos/demo1.tsx b/packages/client/src/schema-component/antd/input-number/demos/demo1.tsx
new file mode 100644
index 0000000000..036c0eeb43
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/demos/demo1.tsx
@@ -0,0 +1,41 @@
+/**
+ * title: InputNumber
+ */
+import { FormItem } from '@formily/antd';
+import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'boolean',
+      title: `Editable`,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'boolean',
+      title: `Read pretty`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ InputNumber, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/input-number/demos/demo2.tsx b/packages/client/src/schema-component/antd/input-number/demos/demo2.tsx
new file mode 100644
index 0000000000..86e1f5f25b
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/demos/demo2.tsx
@@ -0,0 +1,49 @@
+/**
+ * title: addonBefore/addonAfter
+ */
+import { FormItem } from '@formily/antd';
+import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'boolean',
+      title: `Editable`,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        addonBefore: '¥',
+        addonAfter: '万元',
+      },
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'boolean',
+      title: `Read pretty`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        addonBefore: '¥',
+        addonAfter: '万元',
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ InputNumber, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/input-number/demos/demo3.tsx b/packages/client/src/schema-component/antd/input-number/demos/demo3.tsx
new file mode 100644
index 0000000000..c09ef1da4d
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/demos/demo3.tsx
@@ -0,0 +1,51 @@
+/**
+ * title: stringMode
+ */
+import { FormItem } from '@formily/antd';
+import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'boolean',
+      title: `Editable`,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        stringMode: true,
+        step: '0.01',
+        addonAfter: '%',
+      },
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'boolean',
+      title: `Read pretty`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        stringMode: true,
+        step: '0.01',
+        addonAfter: '%',
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ InputNumber, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/input-number/index.md b/packages/client/src/schema-component/antd/input-number/index.md
index ea97fc56a5..b0687cd796 100644
--- a/packages/client/src/schema-component/antd/input-number/index.md
+++ b/packages/client/src/schema-component/antd/input-number/index.md
@@ -6,3 +6,17 @@ group:
 ---
 
 # InputNumber
+
+## Examples
+
+### InputNumber
+
+<code src="./demos/demo1.tsx" />
+
+### addonBefore/addonAfter
+
+<code src="./demos/demo2.tsx" />
+
+### High precision decimals
+
+<code src="./demos/demo3.tsx" />
diff --git a/packages/client/src/schema-component/antd/input-number/index.ts b/packages/client/src/schema-component/antd/input-number/index.ts
new file mode 100644
index 0000000000..69c441376d
--- /dev/null
+++ b/packages/client/src/schema-component/antd/input-number/index.ts
@@ -0,0 +1 @@
+export * from './InputNumber';