diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
index ec98effff5..25edfab623 100644
--- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -46,14 +46,34 @@ Array [
 
 exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] = `
 <div
-  class="ant-qrcode"
-  style="width: 160px; height: 160px;"
+  class="ant-space ant-space-vertical ant-space-align-center"
 >
-  <canvas
-    height="134"
-    style="height: 134px; width: 134px;"
-    width="134"
-  />
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <div
+      class="ant-qrcode"
+      style="width: 160px; height: 160px;"
+    >
+      <canvas
+        height="134"
+        style="height: 134px; width: 134px;"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <input
+      class="ant-input"
+      maxlength="60"
+      placeholder="-"
+      type="text"
+      value="https://ant.design/"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
index ab35368de5..4c8d7f0ea4 100644
--- a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -11,14 +11,34 @@ exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = `
 
 exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
 <div
-  class="ant-qrcode"
-  style="width:160px;height:160px"
+  class="ant-space ant-space-vertical ant-space-align-center"
 >
-  <canvas
-    height="134"
-    style="height:134px;width:134px"
-    width="134"
-  />
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="width:160px;height:160px"
+    >
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <input
+      class="ant-input"
+      maxlength="60"
+      placeholder="-"
+      type="text"
+      value="https://ant.design/"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/qrcode/demo/base.tsx b/components/qrcode/demo/base.tsx
index 5092f0f86e..5d175758fd 100644
--- a/components/qrcode/demo/base.tsx
+++ b/components/qrcode/demo/base.tsx
@@ -1,6 +1,20 @@
+import { Input, QRCode, Space } from 'antd';
 import React from 'react';
-import { QRCode } from 'antd';
 
-const App: React.FC = () => <QRCode value="https://ant.design/" />;
+const App: React.FC = () => {
+  const [text, setText] = React.useState('https://ant.design/');
+
+  return (
+    <Space direction="vertical" align="center">
+      <QRCode value={text || '-'} />
+      <Input
+        placeholder="-"
+        maxLength={60}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+    </Space>
+  );
+};
 
 export default App;