diff --git a/assets/index.less b/assets/index.less
index a5e1abe5..e3e559e5 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -133,4 +133,24 @@
       .handler-disabled();
     }
   }
+
+  &-type-spinner {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-type-spinner &-handler {
+    flex: 0 0 20px;
+    line-height: 26px;
+    height: 100%;
+  }
+
+  &-type-spinner &-handler-up {
+    border-bottom: 0;
+    border-left: 1px solid #d9d9d9;
+  }
+  &-type-spinner &-handler-down {
+    border-top: 0;
+    border-right: 1px solid #d9d9d9;
+  }
 }
diff --git a/docs/demo/spinner.tsx b/docs/demo/spinner.tsx
new file mode 100644
index 00000000..085bc0b3
--- /dev/null
+++ b/docs/demo/spinner.tsx
@@ -0,0 +1,78 @@
+/* eslint no-console:0 */
+import InputNumber from '@rc-component/input-number';
+import React from 'react';
+import '../../assets/index.less';
+
+export default () => {
+  const [disabled, setDisabled] = React.useState(false);
+  const [readOnly, setReadOnly] = React.useState(false);
+  const [keyboard, setKeyboard] = React.useState(true);
+  const [wheel, setWheel] = React.useState(true);
+  const [stringMode, setStringMode] = React.useState(false);
+  const [value, setValue] = React.useState<string | number>(93);
+
+  const onChange = (val: number) => {
+    console.warn('onChange:', val, typeof val);
+    setValue(val);
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <h3>Controlled</h3>
+      <InputNumber
+        type="spinner"
+        aria-label="Simple number input example"
+        min={-8}
+        max={10}
+        style={{ width: 100 }}
+        value={value}
+        onChange={onChange}
+        readOnly={readOnly}
+        disabled={disabled}
+        keyboard={keyboard}
+        changeOnWheel={wheel}
+        stringMode={stringMode}
+      />
+      <p>
+        <button type="button" onClick={() => setDisabled(!disabled)}>
+          toggle Disabled ({String(disabled)})
+        </button>
+        <button type="button" onClick={() => setReadOnly(!readOnly)}>
+          toggle readOnly ({String(readOnly)})
+        </button>
+        <button type="button" onClick={() => setKeyboard(!keyboard)}>
+          toggle keyboard ({String(keyboard)})
+        </button>
+        <button type="button" onClick={() => setStringMode(!stringMode)}>
+          toggle stringMode ({String(stringMode)})
+        </button>
+        <button type="button" onClick={() => setWheel(!wheel)}>
+          toggle wheel ({String(wheel)})
+        </button>
+      </p>
+
+      <hr />
+      <h3>Uncontrolled</h3>
+      <InputNumber
+        type="spinner"
+        style={{ width: 100 }}
+        onChange={onChange}
+        min={-99}
+        max={99}
+        defaultValue={33}
+      />
+
+      <hr />
+      <h3>!changeOnBlur</h3>
+      <InputNumber
+        type="spinner"
+        style={{ width: 100 }}
+        min={-9}
+        max={9}
+        defaultValue={10}
+        onChange={onChange}
+        changeOnBlur={false}
+      />
+    </div>
+  );
+};
diff --git a/docs/example.md b/docs/example.md
index 7743a757..b88e7135 100644
--- a/docs/example.md
+++ b/docs/example.md
@@ -52,3 +52,7 @@ nav:
 ## focus
 
 <code src="./demo/focus.tsx"></code>
+
+## spinner
+
+<code src="./demo/spinner.tsx"></code>
diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
index 8cb3d822..a39ad176 100644
--- a/src/InputNumber.tsx
+++ b/src/InputNumber.tsx
@@ -63,6 +63,8 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   /** value will show as string */
   stringMode?: boolean;
 
+  type?: 'input' | 'spinner';
+
   defaultValue?: T;
   value?: T | null;
 
@@ -119,6 +121,7 @@ type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'> & {
 const InternalInputNumber = React.forwardRef(
   (props: InternalInputNumberProps, ref: React.Ref<HTMLInputElement>) => {
     const {
+      type,
       prefixCls,
       className,
       style,
@@ -154,6 +157,8 @@ const InternalInputNumber = React.forwardRef(
       ...inputProps
     } = props;
 
+    const { classNames, styles } = React.useContext(SemanticContext) || {};
+
     const inputClassName = `${prefixCls}-input`;
 
     const inputRef = React.useRef<HTMLInputElement>(null);
@@ -586,6 +591,23 @@ const InternalInputNumber = React.forwardRef(
     }, [inputValue]);
 
     // ============================ Render ============================
+    const upNode = (
+      <StepHandler action="up" prefixCls={prefixCls} disabled={upDisabled} onStep={onInternalStep}>
+        {upHandler}
+      </StepHandler>
+    );
+
+    const downNode = (
+      <StepHandler
+        action="down"
+        prefixCls={prefixCls}
+        disabled={downDisabled}
+        onStep={onInternalStep}
+      >
+        {downHandler}
+      </StepHandler>
+    );
+
     return (
       <div
         ref={domRef}
@@ -607,16 +629,18 @@ const InternalInputNumber = React.forwardRef(
         onCompositionEnd={onCompositionEnd}
         onBeforeInput={onBeforeInput}
       >
-        {controls && (
-          <StepHandler
-            prefixCls={prefixCls}
-            upNode={upHandler}
-            downNode={downHandler}
-            upDisabled={upDisabled}
-            downDisabled={downDisabled}
-            onStep={onInternalStep}
-          />
+        {type === 'input' && controls && (
+          <div
+            className={clsx(`${prefixCls}-handler-wrap`, classNames?.actions)}
+            style={styles?.actions}
+          >
+            {upNode}
+            {downNode}
+          </div>
         )}
+
+        {type === 'spinner' && controls && downNode}
+
         <div className={`${inputClassName}-wrap`}>
           <input
             autoComplete="off"
@@ -634,6 +658,8 @@ const InternalInputNumber = React.forwardRef(
             readOnly={readOnly}
           />
         </div>
+
+        {type === 'spinner' && controls && upNode}
       </div>
     );
   },
@@ -641,6 +667,7 @@ const InternalInputNumber = React.forwardRef(
 
 const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, ref) => {
   const {
+    type = 'input',
     disabled,
     style,
     prefixCls = 'rc-input-number',
@@ -675,7 +702,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
   return (
     <SemanticContext.Provider value={memoizedValue}>
       <BaseInput
-        className={className}
+        className={clsx(`${prefixCls}-type-${type}`, className)}
         triggerFocus={focus}
         prefixCls={prefixCls}
         value={value}
@@ -696,6 +723,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
         ref={holderRef}
       >
         <InternalInputNumber
+          type={type}
           prefixCls={prefixCls}
           disabled={disabled}
           ref={inputFocusRef}
diff --git a/src/StepHandler.tsx b/src/StepHandler.tsx
index 51fd56d6..cfb25346 100644
--- a/src/StepHandler.tsx
+++ b/src/StepHandler.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
 import raf from '@rc-component/util/lib/raf';
-import SemanticContext from './SemanticContext';
 
 /**
  * When click and hold on a button - the speed of auto changing the value.
@@ -16,19 +15,17 @@ const STEP_DELAY = 600;
 
 export interface StepHandlerProps {
   prefixCls: string;
-  upNode?: React.ReactNode;
-  downNode?: React.ReactNode;
-  upDisabled?: boolean;
-  downDisabled?: boolean;
+  action: 'up' | 'down';
+  children?: React.ReactNode;
+  disabled?: boolean;
   onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
 }
 
 export default function StepHandler({
   prefixCls,
-  upNode,
-  downNode,
-  upDisabled,
-  downDisabled,
+  action,
+  children,
+  disabled,
   onStep,
 }: StepHandlerProps) {
   // ======================== Step ========================
@@ -38,22 +35,20 @@ export default function StepHandler({
   const onStepRef = React.useRef<StepHandlerProps['onStep']>();
   onStepRef.current = onStep;
 
-  const { classNames, styles } = React.useContext(SemanticContext) || {};
-
   const onStopStep = () => {
     clearTimeout(stepTimeoutRef.current);
   };
 
   // We will interval update step when hold mouse down
-  const onStepMouseDown = (e: React.MouseEvent, up: boolean) => {
+  const onStepMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     onStopStep();
 
-    onStepRef.current(up, 'handler');
+    onStepRef.current(action === 'up', 'handler');
 
     // Loop step for interval
     function loopStep() {
-      onStepRef.current(up, 'handler');
+      onStepRef.current(action === 'up', 'handler');
 
       stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);
     }
@@ -75,11 +70,8 @@ export default function StepHandler({
   // ======================= Render =======================
   const handlerClassName = `${prefixCls}-handler`;
 
-  const upClassName = clsx(handlerClassName, `${handlerClassName}-up`, {
-    [`${handlerClassName}-up-disabled`]: upDisabled,
-  });
-  const downClassName = clsx(handlerClassName, `${handlerClassName}-down`, {
-    [`${handlerClassName}-down-disabled`]: downDisabled,
+  const className = clsx(handlerClassName, `${handlerClassName}-${action}`, {
+    [`${handlerClassName}-${action}-disabled`]: disabled,
   });
 
   // fix: https://github.com/ant-design/ant-design/issues/43088
@@ -97,29 +89,16 @@ export default function StepHandler({
   };
 
   return (
-    <div className={clsx(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
-      <span
-        {...sharedHandlerProps}
-        onMouseDown={(e) => {
-          onStepMouseDown(e, true);
-        }}
-        aria-label="Increase Value"
-        aria-disabled={upDisabled}
-        className={upClassName}
-      >
-        {upNode || <span unselectable="on" className={`${prefixCls}-handler-up-inner`} />}
-      </span>
-      <span
-        {...sharedHandlerProps}
-        onMouseDown={(e) => {
-          onStepMouseDown(e, false);
-        }}
-        aria-label="Decrease Value"
-        aria-disabled={downDisabled}
-        className={downClassName}
-      >
-        {downNode || <span unselectable="on" className={`${prefixCls}-handler-down-inner`} />}
-      </span>
-    </div>
+    <span
+      {...sharedHandlerProps}
+      onMouseDown={(e) => {
+        onStepMouseDown(e);
+      }}
+      aria-label={action === 'up' ? 'Increase Value' : 'Decrease Value'}
+      aria-disabled={disabled}
+      className={className}
+    >
+      {children || <span unselectable="on" className={`${prefixCls}-handler-${action}-inner`} />}
+    </span>
   );
 }
diff --git a/tests/__snapshots__/baseInput.test.tsx.snap b/tests/__snapshots__/baseInput.test.tsx.snap
index a8e10153..dfc613ff 100644
--- a/tests/__snapshots__/baseInput.test.tsx.snap
+++ b/tests/__snapshots__/baseInput.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`baseInput addon should render properly 1`] = `
 <div>
   <div>
     <div
-      class="rc-input-group-wrapper"
+      class="rc-input-group-wrapper rc-input-type-input"
     >
       <div
         class="rc-input-wrapper rc-input-group"
@@ -64,7 +64,7 @@ exports[`baseInput addon should render properly 1`] = `
     <br />
     <br />
     <div
-      class="rc-input-group-wrapper"
+      class="rc-input-group-wrapper rc-input-type-input"
     >
       <div
         class="rc-input-wrapper rc-input-group"
@@ -128,7 +128,7 @@ exports[`baseInput addon should render properly 1`] = `
 exports[`baseInput prefix should render properly 1`] = `
 <div>
   <div
-    class="rc-input-affix-wrapper"
+    class="rc-input-affix-wrapper rc-input-type-input"
   >
     <span
       class="rc-input-prefix"
diff --git a/tests/props.test.tsx b/tests/props.test.tsx
index 0b50c102..0bd4b4f1 100644
--- a/tests/props.test.tsx
+++ b/tests/props.test.tsx
@@ -2,11 +2,10 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { render, fireEvent } from '@testing-library/react';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import type { ValueType } from '../src'
+import type { ValueType } from '../src';
 import InputNumber from '../src';
 
 describe('InputNumber.Props', () => {
-
   it('max', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber max={10} onChange={onChange} />);
@@ -61,7 +60,6 @@ describe('InputNumber.Props', () => {
       expect(input).toHaveFocus();
       done();
     }, 500);
-
   });
 
   describe('step', () => {
@@ -96,8 +94,8 @@ describe('InputNumber.Props', () => {
         <InputNumber
           stringMode
           onChange={onChange}
-          step='0.000000001'
-          defaultValue='0.000000001'
+          step="0.000000001"
+          defaultValue="0.000000001"
         />,
       );
 
@@ -114,8 +112,8 @@ describe('InputNumber.Props', () => {
         <InputNumber
           stringMode
           onChange={onChange}
-          step='0.0000000001' // 1e-10
-          defaultValue='0.000000001' // 1e-9
+          step="0.0000000001" // 1e-10
+          defaultValue="0.000000001" // 1e-9
         />,
       );
 
@@ -186,7 +184,7 @@ describe('InputNumber.Props', () => {
         return (
           <div>
             <button
-              type='button'
+              type="button"
               onClick={() => {
                 setValue('103aa');
               }}
@@ -215,7 +213,7 @@ describe('InputNumber.Props', () => {
         return (
           <div>
             <button
-              type='button'
+              type="button"
               onClick={() => {
                 setValue(undefined);
               }}
@@ -276,27 +274,29 @@ describe('InputNumber.Props', () => {
     });
 
     it('default value can be a string greater than 16 characters', () => {
-      const { container } = render(<InputNumber<ValueType> max={10} defaultValue='-3.637978807091713e-12' />);
+      const { container } = render(
+        <InputNumber<ValueType> max={10} defaultValue="-3.637978807091713e-12" />,
+      );
       const input = container.querySelector('input');
       expect(input.value).toEqual('-0.000000000003637978807091713');
     });
 
     it('invalidate defaultValue', () => {
-      const { container } = render(<InputNumber defaultValue='light' />);
+      const { container } = render(<InputNumber defaultValue="light" />);
       const input = container.querySelector('input');
       expect(input.value).toEqual('light');
     });
   });
 
   describe('value', () => {
-    it('value shouldn\'t higher than max', () => {
+    it("value shouldn't higher than max", () => {
       const { container } = render(<InputNumber min={0} max={10} value={13} />);
       const input = container.querySelector('input');
       expect(input.value).toEqual('13');
       expect(container.querySelector('.rc-input-number-out-of-range')).toBeTruthy();
     });
 
-    it('value shouldn\'t lower than min', () => {
+    it("value shouldn't lower than min", () => {
       const { container } = render(<InputNumber min={0} max={10} value={-1} />);
       const input = container.querySelector('input');
       expect(input.value).toEqual('-1');
@@ -304,7 +304,9 @@ describe('InputNumber.Props', () => {
     });
 
     it('value can be a string greater than 16 characters', () => {
-      const { container } = render(<InputNumber<ValueType> max={10} value='-3.637978807091713e-12' />);
+      const { container } = render(
+        <InputNumber<ValueType> max={10} value="-3.637978807091713e-12" />,
+      );
       const input = container.querySelector('input');
       expect(input.value).toEqual('-0.000000000003637978807091713');
     });
@@ -384,14 +386,13 @@ describe('InputNumber.Props', () => {
 
   describe('Pattern prop', () => {
     it(`should render with a pattern attribute if the pattern prop is supplied`, () => {
-      const { container } = render(<InputNumber pattern='\d*' />);
+      const { container } = render(<InputNumber pattern="\d*" />);
       expect(container.querySelector('input')).toHaveAttribute('pattern', '\\d*');
     });
 
     it(`should render with no pattern attribute if the pattern prop is not supplied`, () => {
       const { container } = render(<InputNumber />);
       expect(container.querySelector('input')).not.toHaveAttribute('pattern', '\\d*');
-
     });
   });
 
@@ -406,9 +407,16 @@ describe('InputNumber.Props', () => {
     });
   });
 
+  describe('type props', () => {
+    it('render spinner type', () => {
+      const { container } = render(<InputNumber value={1} type="spinner" />);
+      expect(container.querySelector('.rc-input-number')).toHaveClass('rc-input-number-type-spinner');
+    });
+  });
+
   describe('aria and data props', () => {
     it('passes data-* attributes', () => {
-      const { container } = render(<InputNumber value={1} data-test='test-id' data-id='12345' />);
+      const { container } = render(<InputNumber value={1} data-test="test-id" data-id="12345" />);
       const input = container.querySelector('input');
 
       expect(input).toHaveAttribute('data-test', 'test-id');
@@ -417,18 +425,16 @@ describe('InputNumber.Props', () => {
 
     it('passes aria-* attributes', () => {
       const { container } = render(
-        <InputNumber value={1} aria-labelledby='test-id' aria-label='some-label' />,
+        <InputNumber value={1} aria-labelledby="test-id" aria-label="some-label" />,
       );
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('aria-labelledby', 'test-id');
       expect(input).toHaveAttribute('aria-label', 'some-label');
-
     });
 
     it('passes role attribute', () => {
-      const { container } = render(<InputNumber value={1} role='searchbox' />);
+      const { container } = render(<InputNumber value={1} role="searchbox" />);
       expect(container.querySelector('input')).toHaveAttribute('role', 'searchbox');
-
     });
   });
 });