diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 21a44e6dbd7a..fc492694f992 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -1,17 +1,18 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import type { BaseInputProps } from 'rc-input/lib/interface';
 import type { TextAreaRef as RcTextAreaRef } from 'rc-textarea';
 import RcTextArea from 'rc-textarea';
 import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea/lib/interface';
-import * as React from 'react';
-import { forwardRef } from 'react';
+
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
-import type { SizeType } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
@@ -38,7 +39,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
     disabled: customDisabled,
     status: customStatus,
     allowClear,
-    showCount,
     classNames: classes,
     rootClassName,
     className,
@@ -99,7 +99,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
             [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
             [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
             [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
-            [`${prefixCls}-textarea-show-count`]: showCount,
+            [`${prefixCls}-textarea-show-count`]: props.showCount || props.count?.show,
           },
           getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
           hashId,
@@ -120,7 +120,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
       }}
       prefixCls={prefixCls}
       suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
-      showCount={showCount}
       ref={innerRef}
     />,
   );
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index b379db342c08..cc7a19e956e8 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -602,6 +602,91 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
 
 exports[`renders components/input/demo/addon.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 16px;"
+>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Exceed Max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper ant-input-out-of-range"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="Hello, antd!"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          12 / 10
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Emoji count as length 1
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥🔥🔥"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          3
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Not exceed max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥 antd"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          6 / 6
+        </span>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/input/demo/align.tsx extend context correctly 1`] = `
 Array [
   <div
@@ -10347,7 +10432,10 @@ Array [
 exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 32px;"
+>
   <span
     class="ant-input-affix-wrapper"
   >
@@ -10366,15 +10454,14 @@ Array [
         0 / 20
       </span>
     </span>
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
     data-count="0 / 100"
   >
     <textarea
       class="ant-input"
+      placeholder="can resize"
     />
     <span
       class="ant-input-suffix"
@@ -10385,8 +10472,28 @@ Array [
         0 / 100
       </span>
     </span>
-  </span>,
-]
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
+    data-count="0 / 100"
+    style="height: 120px; resize: none;"
+  >
+    <textarea
+      class="ant-input"
+      placeholder="disable resize"
+      style="resize: none;"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        class="ant-input-data-count"
+      >
+        0 / 100
+      </span>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 2`] = `[]`;
@@ -10689,52 +10796,6 @@ Array [
 
 exports[`renders components/input/demo/textarea-resize.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 1`] = `
-Array [
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; margin-bottom: 24px;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="can resize"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; resize: none;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="disable resize"
-      style="resize: none;"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-]
-`;
-
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/input/demo/tooltip.tsx extend context correctly 1`] = `
 Array [
   <input
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 717ee75f3331..9554fa9b9a12 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -331,6 +331,89 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/input/demo/advance-count.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap:16px"
+>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Exceed Max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper ant-input-out-of-range"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="Hello, antd!"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          12 / 10
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Emoji count as length 1
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥🔥🔥"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          3
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Not exceed max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥 antd"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          6 / 6
+        </span>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/input/demo/align.tsx correctly 1`] = `
 Array [
   <div
@@ -3898,7 +3981,10 @@ Array [
 `;
 
 exports[`renders components/input/demo/show-count.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap:32px"
+>
   <span
     class="ant-input-affix-wrapper"
   >
@@ -3917,15 +4003,14 @@ Array [
         0 / 20
       </span>
     </span>
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
     data-count="0 / 100"
   >
     <textarea
       class="ant-input"
+      placeholder="can resize"
     />
     <span
       class="ant-input-suffix"
@@ -3936,8 +4021,28 @@ Array [
         0 / 100
       </span>
     </span>
-  </span>,
-]
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
+    data-count="0 / 100"
+    style="height:120px;resize:none"
+  >
+    <textarea
+      class="ant-input"
+      placeholder="disable resize"
+      style="resize:none"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        class="ant-input-data-count"
+      >
+        0 / 100
+      </span>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/size.tsx correctly 1`] = `
@@ -4230,50 +4335,6 @@ Array [
 ]
 `;
 
-exports[`renders components/input/demo/textarea-show-count.tsx correctly 1`] = `
-Array [
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height:120px;margin-bottom:24px"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="can resize"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height:120px;resize:none"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="disable resize"
-      style="resize:none"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-]
-`;
-
 exports[`renders components/input/demo/tooltip.tsx correctly 1`] = `
 <input
   class="ant-input"
diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx
index 10d6d1e372d9..bd4c7abd0c0a 100644
--- a/components/input/__tests__/index.test.tsx
+++ b/components/input/__tests__/index.test.tsx
@@ -261,23 +261,6 @@ describe('should support showCount', () => {
     expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('8 / 5');
   });
 
-  describe('emoji', () => {
-    it('should minimize value between emoji length and maxLength', () => {
-      const { container } = render(<Input maxLength={1} showCount value="👀" />);
-      expect(container.querySelector('input')?.getAttribute('value')).toBe('👀');
-      expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 1');
-
-      const { container: container1 } = render(<Input maxLength={2} showCount value="👀" />);
-      expect(container1.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 2');
-    });
-
-    it('slice emoji', () => {
-      const { container } = render(<Input maxLength={5} showCount value="1234😂" />);
-      expect(container.querySelector('input')?.getAttribute('value')).toBe('1234😂');
-      expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5 / 5');
-    });
-  });
-
   it('count formatter', () => {
     const { container } = render(
       <Input
@@ -291,6 +274,20 @@ describe('should support showCount', () => {
     expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
     expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
   });
+
+  it('count', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+          max: 5,
+        }}
+        value="12345"
+      />,
+    );
+    expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
+    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
+  });
 });
 
 describe('Input allowClear', () => {
diff --git a/components/input/__tests__/textarea.test.tsx b/components/input/__tests__/textarea.test.tsx
index 6fd52fb4db3c..5f401d2b51fc 100644
--- a/components/input/__tests__/textarea.test.tsx
+++ b/components/input/__tests__/textarea.test.tsx
@@ -1,6 +1,7 @@
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
 import React, { useState } from 'react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import type { RenderOptions } from '../../../tests/utils';
@@ -102,18 +103,6 @@ describe('TextArea', () => {
       expect(container.querySelector('textarea')?.value).toEqual('light');
     });
 
-    it('should limit correctly when in control', () => {
-      const Demo = () => {
-        const [val, setVal] = React.useState('');
-        return <TextArea maxLength={1} value={val} onChange={(e) => setVal(e.target.value)} />;
-      };
-
-      const { container } = render(<Demo />);
-      fireEvent.change(container.querySelector('textarea')!, { target: { value: 'light' } });
-
-      expect(container.querySelector('textarea')?.value).toEqual('l');
-    });
-
     it('should exceed maxLength when use IME', () => {
       const onChange = jest.fn();
 
@@ -129,68 +118,6 @@ describe('TextArea', () => {
         expect.objectContaining({ target: expect.objectContaining({ value: '竹' }) }),
       );
     });
-
-    // 字符输入
-    it('should not cut off string when cursor position is not at the end', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="123456" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 1, value: 'w123456' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 3, value: 'w123456' },
-      });
-      expect(container.querySelector('textarea')?.value).toBe('123456');
-    });
-
-    // 拼音输入
-    // 1. 光标位于最后，且当前字符数未达到6个，若选中的字符 + 原字符的长度超过6个，则将最终的字符按照maxlength截断
-    it('when the input method is pinyin and the cursor is at the end, should use maxLength to crop', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 4, value: '1234' },
-      });
-      fireEvent.compositionStart(container.querySelector('textarea')!);
-
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 9, value: '1234z z z' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 7, value: '1234组织者' },
-      });
-
-      fireEvent.compositionEnd(container.querySelector('textarea')!);
-
-      expect(container.querySelector('textarea')?.value).toBe('1234组织');
-    });
-
-    // 2. 光标位于中间或开头，且当前字符数未达到6个，若选中的字符 + 原字符的长度超过6个，则显示原有字符
-    it('when the input method is Pinyin and the cursor is in the middle, should display the original string', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 2, value: '1234' },
-      });
-      fireEvent.compositionStart(container.querySelector('textarea')!);
-
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 2, value: '12z z z34' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 5, value: '12组织者34' },
-      });
-
-      fireEvent.compositionEnd(container.querySelector('textarea')!);
-
-      expect(container.querySelector('textarea')?.value).toBe('1234');
-    });
   });
 
   it('handleKeyDown', () => {
@@ -259,37 +186,6 @@ describe('TextArea', () => {
       ).toBe('8 / 5');
     });
 
-    describe('emoji', () => {
-      it('should minimize value between emoji length and maxLength', () => {
-        const { container } = render(<TextArea maxLength={1} showCount value="👀" />);
-        expect(container.querySelector('textarea')?.value).toBe('👀');
-        expect(
-          container.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('1 / 1');
-
-        // fix: 当 maxLength 长度为 2 的时候，输入 emoji 之后 showCount 会显示 1/2，但是不能再输入了
-        // zombieJ: 逻辑统一了，emoji 现在也可以正确计数了
-        const { container: container1 } = render(<TextArea maxLength={2} showCount value="👀" />);
-        expect(
-          container1.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('1 / 2');
-      });
-
-      it('defaultValue should slice', () => {
-        const { container } = render(<TextArea maxLength={1} defaultValue="🧐cut" />);
-        expect(container.querySelector('textarea')?.value).toBe('🧐');
-      });
-
-      // 修改TextArea value截取规则后新增单测
-      it('slice emoji', () => {
-        const { container } = render(<TextArea maxLength={5} showCount value="1234😂" />);
-        expect(container.querySelector('textarea')?.value).toBe('1234😂');
-        expect(
-          container.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('5 / 5');
-      });
-    });
-
     it('className & style patch to outer', () => {
       const { container } = render(
         <TextArea className="bamboo" style={{ background: 'red' }} showCount />,
diff --git a/components/input/demo/advance-count.md b/components/input/demo/advance-count.md
new file mode 100644
index 000000000000..e03b9be00bb7
--- /dev/null
+++ b/components/input/demo/advance-count.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+在某些场景下，需要定制计数能力（例如 emoji 长度以 1 计算），可以通过 `count` 属性来实现。在该模式下，通过 `count.max` 属性来超出原生 `maxLength` 的限制。
+
+## en-US
+
+It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the `count` attribute. Use `count.max` attribute exceeds the limit of the native `maxLength`.
diff --git a/components/input/demo/advance-count.tsx b/components/input/demo/advance-count.tsx
new file mode 100644
index 000000000000..079a227e2243
--- /dev/null
+++ b/components/input/demo/advance-count.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Flex, Input, Typography } from 'antd';
+import { runes } from 'runes2';
+
+const App: React.FC = () => (
+  <Flex vertical gap={16}>
+    <div>
+      <Typography.Title level={5}>Exceed Max</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          max: 10,
+        }}
+        defaultValue="Hello, antd!"
+      />
+    </div>
+
+    <div>
+      <Typography.Title level={5}>Emoji count as length 1</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          strategy: (txt) => runes(txt).length,
+        }}
+        defaultValue="🔥🔥🔥"
+      />
+    </div>
+
+    <div>
+      <Typography.Title level={5}>Not exceed max</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          max: 6,
+          strategy: (txt) => runes(txt).length,
+          exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
+        }}
+        defaultValue="🔥 antd"
+      />
+    </div>
+  </Flex>
+);
+
+export default App;
diff --git a/components/input/demo/show-count.tsx b/components/input/demo/show-count.tsx
index 18c5df3dd2cb..ae715896367e 100644
--- a/components/input/demo/show-count.tsx
+++ b/components/input/demo/show-count.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from 'antd';
+import { Flex, Input } from 'antd';
 
 const { TextArea } = Input;
 
@@ -8,12 +8,17 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)
 };
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap={32}>
     <Input showCount maxLength={20} onChange={onChange} />
-    <br />
-    <br />
-    <TextArea showCount maxLength={100} onChange={onChange} />
-  </>
+    <TextArea showCount maxLength={100} onChange={onChange} placeholder="can resize" />
+    <TextArea
+      showCount
+      maxLength={100}
+      onChange={onChange}
+      placeholder="disable resize"
+      style={{ height: 120, resize: 'none' }}
+    />
+  </Flex>
 );
 
 export default App;
diff --git a/components/input/demo/textarea-show-count.md b/components/input/demo/textarea-show-count.md
deleted file mode 100644
index 3e48eba88e00..000000000000
--- a/components/input/demo/textarea-show-count.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-展示字数提示。
-
-## en-US
-
-Show character counting.
diff --git a/components/input/demo/textarea-show-count.tsx b/components/input/demo/textarea-show-count.tsx
deleted file mode 100644
index ea2b3f0c2096..000000000000
--- a/components/input/demo/textarea-show-count.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Input } from 'antd';
-
-const { TextArea } = Input;
-
-const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-  console.log('Change:', e.target.value);
-};
-
-const App: React.FC = () => (
-  <>
-    <TextArea
-      showCount
-      maxLength={100}
-      style={{ height: 120, marginBottom: 24 }}
-      onChange={onChange}
-      placeholder="can resize"
-    />
-    <TextArea
-      showCount
-      maxLength={100}
-      style={{ height: 120, resize: 'none' }}
-      onChange={onChange}
-      placeholder="disable resize"
-    />
-  </>
-);
-
-export default App;
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index ea4618290c96..65e67516315d 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -32,7 +32,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 <code src="./demo/password-input.tsx">Password box</code>
 <code src="./demo/allowClear.tsx">With clear icon</code>
 <code src="./demo/show-count.tsx">With character counting</code>
-<code src="./demo/textarea-show-count.tsx">Textarea with character counting</code>
+<code src="./demo/advance-count.tsx" version=">= 5.10.0">Custom count logic</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/borderless.tsx">Borderless</code>
 <code src="./demo/focus.tsx">Focus</code>
@@ -55,6 +55,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false |  |
 | bordered | Whether has border style | boolean | true | 4.5.0 |
 | classNames | Semantic DOM class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 |
+| count | Character count config | [CountConfig](#countconfig) | - | 5.10.0 |
 | defaultValue | The initial input content | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
@@ -74,21 +75,30 @@ Common props ref：[Common props](/docs/react/common-props)
 
 The rest of the props of Input are exactly the same as the original [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).
 
+#### CountConfig
+
+```tsx
+interface CountConfig {
+  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
+  max?: number;
+  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
+  strategy?: (value: string) => number;
+  // Same as `showCount`
+  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
+  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
+  exceedFormatter?: (value: string, config: { max: number }) => string;
+}
+```
+
 ### Input.TextArea
 
+Same as Input, and more:
+
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
-| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| bordered | Whether has border style | boolean | true | 4.5.0 |
+| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
 | classNames | Semantic DOM class | Record<[SemanticDOM](#inputtextarea-1), string> | - | 5.4.0 |
-| defaultValue | The initial input content | string | - |  |
-| maxLength | The maximum number of characters in TextArea | number | - | 4.7.0 |
-| showCount | Whether to show character count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | styles | Semantic DOM style | Record<[SemanticDOM](#inputtextarea-1), CSSProperties> | - | 5.4.0 |
-| value | The input content value | string | - |  |
-| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
-| onResize | The callback function that is triggered when resize | function({ width, height }) | - |  |
 
 The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
 
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 6a4c9926fc8a..90b0dd41dab6 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -33,7 +33,7 @@ demo:
 <code src="./demo/password-input.tsx">密码框</code>
 <code src="./demo/allowClear.tsx">带移除图标</code>
 <code src="./demo/show-count.tsx">带字数提示</code>
-<code src="./demo/textarea-show-count.tsx">带字数提示的文本域</code>
+<code src="./demo/advance-count.tsx" version=">= 5.10.0">定制计数能力</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/borderless.tsx">无边框</code>
 <code src="./demo/focus.tsx">聚焦</code>
@@ -56,6 +56,7 @@ demo:
 | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
 | classNames | 语义化结构 class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 |
+| count | 字符计数配置 | [CountConfig](#countconfig) | - | 5.10.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
@@ -75,21 +76,30 @@ demo:
 
 Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
 
+#### CountConfig
+
+```tsx
+interface CountConfig {
+  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
+  max?: number;
+  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
+  strategy?: (value: string) => number;
+  // 同 `showCount`
+  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
+  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
+  exceedFormatter?: (value: string, config: { max: number }) => string;
+}
+```
+
 ### Input.TextArea
 
+同 Input 属性，外加：
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
 | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
 | classNames | 语义化结构 class | Record<[SemanticDOM](#inputtextarea-1), string> | - | 5.4.0 |
-| defaultValue | 输入框默认内容 | string | - |  |
-| maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | styles | 语义化结构 style | Record<[SemanticDOM](#inputtextarea-1), CSSProperties> | - | 5.4.0 |
-| value | 输入框内容 | string | - |  |
-| onPressEnter | 按下回车的回调 | function(e) | - |  |
-| onResize | resize 回调 | function({ width, height }) | - |  |
 
 `Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
 
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 9565ded17190..ffad129760f5 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { GlobalToken } from '../../theme/interface';
@@ -1017,6 +1018,20 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
   };
 };
 
+// ============================== Range ===============================
+const genRangeStyle: GenerateStyle<InputToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-out-of-range`]: {
+      [`&, & input, & textarea, ${componentCls}-show-count-suffix, ${componentCls}-data-count`]: {
+        color: token.colorError,
+      },
+    },
+  };
+};
+
+// ============================== Tokens ==============================
 export function initInputToken(token: GlobalToken): SharedInputToken {
   return mergeToken<InputToken>(token, {
     inputAffixPadding: token.paddingXXS,
@@ -1078,6 +1093,7 @@ export default genComponentStyleHook(
       genAffixStyle(inputToken),
       genGroupStyle(inputToken),
       genSearchInputStyle(inputToken),
+      genRangeStyle(inputToken),
       // =====================================================
       // ==             Space Compact                       ==
       // =====================================================
diff --git a/package.json b/package.json
index 43ca5d664de8..d4919326d960 100644
--- a/package.json
+++ b/package.json
@@ -131,9 +131,9 @@
     "rc-dropdown": "~4.1.0",
     "rc-field-form": "~1.38.2",
     "rc-image": "~7.3.1",
-    "rc-input": "~1.2.1",
-    "rc-input-number": "~8.1.0",
-    "rc-mentions": "~2.8.0",
+    "rc-input": "~1.3.5",
+    "rc-input-number": "~8.2.0",
+    "rc-mentions": "~2.9.1",
     "rc-menu": "~9.12.2",
     "rc-motion": "^2.9.0",
     "rc-notification": "~5.2.0",
@@ -149,7 +149,7 @@
     "rc-switch": "~4.1.0",
     "rc-table": "~7.34.4",
     "rc-tabs": "~12.12.1",
-    "rc-textarea": "~1.4.0",
+    "rc-textarea": "~1.5.1",
     "rc-tooltip": "~6.1.0",
     "rc-tree": "~5.7.12",
     "rc-tree-select": "~5.13.0",
@@ -292,6 +292,7 @@
     "remark-lint": "^9.0.0",
     "remark-lint-no-undefined-references": "^4.2.1",
     "remark-preset-lint-recommended": "^6.0.0",
+    "runes2": "^1.1.2",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
     "size-limit": "^9.0.0",