diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index d6ec7c1ea7..2a4080bcca 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -486,7 +486,9 @@ Array [
 exports[`renders components/radio/demo/disabled.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/radio/demo/radiobutton.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
@@ -567,10 +569,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -650,10 +651,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
@@ -736,14 +736,16 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/radiobutton.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/radio/demo/radiobutton-solid.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-solid"
   >
@@ -824,10 +826,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-solid"
-    style="margin-top: 16px;"
   >
     <label
       class="ant-radio-button-wrapper"
@@ -907,8 +908,8 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/radiobutton-solid.tsx extend context correctly 2`] = `[]`;
@@ -1459,7 +1460,9 @@ exports[`renders components/radio/demo/radiogroup-with-name.tsx extend context c
 exports[`renders components/radio/demo/radiogroup-with-name.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
   >
@@ -1540,10 +1543,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -1622,10 +1624,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
-    style="margin-top: 16px;"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -1704,8 +1705,8 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/size.tsx extend context correctly 2`] = `[]`;
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
index 608b911443..81c13ae29f 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
@@ -478,7 +478,9 @@ Array [
 `;
 
 exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
@@ -559,10 +561,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -642,10 +643,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
@@ -728,12 +728,14 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-solid"
   >
@@ -814,10 +816,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-solid"
-    style="margin-top:16px"
   >
     <label
       class="ant-radio-button-wrapper"
@@ -897,8 +898,8 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
@@ -1439,7 +1440,9 @@ exports[`renders components/radio/demo/radiogroup-with-name.tsx correctly 1`] =
 `;
 
 exports[`renders components/radio/demo/size.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
   >
@@ -1520,10 +1523,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -1602,10 +1604,9 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
+  </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
-    style="margin-top:16px"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@@ -1684,8 +1685,8 @@ Array [
         Chengdu
       </span>
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/radio/demo/wireframe.tsx correctly 1`] = `
diff --git a/components/radio/demo/radiobutton-solid.tsx b/components/radio/demo/radiobutton-solid.tsx
index cae1ab222c..cb3ff52501 100644
--- a/components/radio/demo/radiobutton-solid.tsx
+++ b/components/radio/demo/radiobutton-solid.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
     <Radio.Group defaultValue="a" buttonStyle="solid">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-    <Radio.Group defaultValue="c" buttonStyle="solid" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="c" buttonStyle="solid">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b" disabled>
         Shanghai
@@ -17,7 +17,7 @@ const App: React.FC = () => (
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>
+  </Flex>
 );
 
 export default App;
diff --git a/components/radio/demo/radiobutton.tsx b/components/radio/demo/radiobutton.tsx
index 0abdc3806e..250d85b736 100644
--- a/components/radio/demo/radiobutton.tsx
+++ b/components/radio/demo/radiobutton.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import type { RadioChangeEvent } from 'antd';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';
 
 const onChange = (e: RadioChangeEvent) => {
   console.log(`radio checked:${e.target.value}`);
 };
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
     <Radio.Group onChange={onChange} defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-    <Radio.Group onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group onChange={onChange} defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b" disabled>
         Shanghai
@@ -22,13 +22,13 @@ const App: React.FC = () => (
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-    <Radio.Group disabled onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group disabled onChange={onChange} defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>
+  </Flex>
 );
 
 export default App;
diff --git a/components/radio/demo/size.tsx b/components/radio/demo/size.tsx
index fe002a1f82..935763d4d5 100644
--- a/components/radio/demo/size.tsx
+++ b/components/radio/demo/size.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
     <Radio.Group defaultValue="a" size="large">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-    <Radio.Group defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-    <Radio.Group defaultValue="a" size="small" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="a" size="small">
       <Radio.Button value="a">Hangzhou</Radio.Button>
       <Radio.Button value="b">Shanghai</Radio.Button>
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>
+  </Flex>
 );
 
 export default App;
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index f146033b40..4831648486 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -16,6 +16,26 @@ Select component to select value from options.
 - Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
 - You probably need [AutoComplete](/components/auto-complete/) if you're looking for an input box that can be typed or selected.
 
+### Usage upgrade after 5.11.0
+
+<!-- prettier-ignore -->
+:::info
+After version 5.11.0, we provide a simpler usage `<Select options={[...]} />` with better performance and potential of writing simpler code style in your applications.
+Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
+:::
+
+```jsx
+// works when >=5.11.0, recommended ✅
+return <Select options={[{ value: 'sample', label: <span>sample</span> }]} />;
+
+// works when <5.11.0, deprecated when >=5.11.0 🙅🏻‍♀️
+return (
+  <Select onChange={onChange}>
+    <Select.Option value="sample">Sample</Select.Option>
+  </Select>
+);
+```
+
 ## Examples
 
 <!-- prettier-ignore -->
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index efa20c2139..956eab519e 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -17,6 +17,26 @@ demo:
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
 - 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。
 
+### 5.11.0 用法升级
+
+<!-- prettier-ignore -->
+:::info
+在 5.11.0 版本后，我们提供了 `<Select options={[...]} />` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。
+同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。
+:::
+
+```jsx
+// >=5.11.0 可用，推荐的写法 ✅
+return <Select options={[{ value: 'sample', label: <span>sample</span> }]} />;
+
+// 5.x 都可用，>=5.11.0 时不推荐 🙅🏻‍♀️
+return (
+  <Select onChange={onChange}>
+    <Select.Option value="sample">Sample</Select.Option>
+  </Select>
+);
+```
+
 ## 代码演示
 
 <!-- prettier-ignore -->