diff --git a/README.md b/README.md
index 1ed89cf..cf13115 100644
--- a/README.md
+++ b/README.md
@@ -58,50 +58,50 @@ Then open `http://localhost:8000`.
 
 ### Input
 
-| Property     | Type                                                       | Default    | Description                                                     |
-| ------------ | ---------------------------------------------------------- | ---------- | --------------------------------------------------------------- |
-| addonAfter   | `ReactNode`                                                | -          | Element displayed after the input.                              |
-| addonBefore  | `ReactNode`                                                | -          | Element displayed before the input.                             |
-| allowClear   | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false`    | Show a clear button for the current value.                      |
-| className    | `string`                                                   | -          | Class name for the input element.                               |
-| classNames   | `InputProps['classNames']`                                 | -          | Semantic class names for input slots.                           |
-| count        | `CountConfig`                                              | -          | Custom count strategy, limit, visibility, and exceed formatter. |
-| defaultValue | `string \| number \| readonly string[] \| bigint`          | -          | Initial input value.                                            |
-| disabled     | `boolean`                                                  | `false`    | Disable the input.                                              |
-| htmlSize     | `number`                                                   | -          | Native input `size` attribute.                                  |
-| maxLength    | `number`                                                   | -          | Native input `maxLength` attribute.                             |
-| prefix       | `ReactNode`                                                | -          | Prefix content inside the input wrapper.                        |
-| prefixCls    | `string`                                                   | `rc-input` | Class name prefix.                                              |
-| showCount    | `boolean \| { formatter: ShowCountFormatter }`             | `false`    | Show character count. Prefer `count.show` for new code.         |
-| styles       | `InputProps['styles']`                                     | -          | Semantic styles for input slots.                                |
-| suffix       | `ReactNode`                                                | -          | Suffix content inside the input wrapper.                        |
-| type         | `InputProps['type']`                                       | `text`     | Native input type. Use `TextArea` for textarea behavior.        |
-| value        | `string \| number \| readonly string[] \| bigint`          | -          | Controlled input value.                                         |
-| onChange     | `React.ChangeEventHandler<HTMLInputElement>`               | -          | Triggered when the value changes.                               |
-| onClear      | `() => void`                                               | -          | Triggered when the clear button is clicked.                     |
-| onPressEnter | `React.KeyboardEventHandler<HTMLInputElement>`             | -          | Triggered when Enter is pressed.                                |
+| Property     | Type                                                                          | Default    | Description                                                                                     |
+| ------------ | ----------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------- |
+| addonAfter   | `ReactNode`                                                                   | -          | Element displayed after the input.                                                              |
+| addonBefore  | `ReactNode`                                                                   | -          | Element displayed before the input.                                                             |
+| allowClear   | `boolean \| { disabled?: boolean; clearIcon?: ReactNode; tabIndex?: number }` | `false`    | Show a clear button for the current value. Set `tabIndex: -1` to skip it during Tab navigation. |
+| className    | `string`                                                                      | -          | Class name for the input element.                                                               |
+| classNames   | `InputProps['classNames']`                                                    | -          | Semantic class names for input slots.                                                           |
+| count        | `CountConfig`                                                                 | -          | Custom count strategy, limit, visibility, and exceed formatter.                                 |
+| defaultValue | `string \| number \| readonly string[] \| bigint`                             | -          | Initial input value.                                                                            |
+| disabled     | `boolean`                                                                     | `false`    | Disable the input.                                                                              |
+| htmlSize     | `number`                                                                      | -          | Native input `size` attribute.                                                                  |
+| maxLength    | `number`                                                                      | -          | Native input `maxLength` attribute.                                                             |
+| prefix       | `ReactNode`                                                                   | -          | Prefix content inside the input wrapper.                                                        |
+| prefixCls    | `string`                                                                      | `rc-input` | Class name prefix.                                                                              |
+| showCount    | `boolean \| { formatter: ShowCountFormatter }`                                | `false`    | Show character count. Prefer `count.show` for new code.                                         |
+| styles       | `InputProps['styles']`                                                        | -          | Semantic styles for input slots.                                                                |
+| suffix       | `ReactNode`                                                                   | -          | Suffix content inside the input wrapper.                                                        |
+| type         | `InputProps['type']`                                                          | `text`     | Native input type. Use `TextArea` for textarea behavior.                                        |
+| value        | `string \| number \| readonly string[] \| bigint`                             | -          | Controlled input value.                                                                         |
+| onChange     | `React.ChangeEventHandler<HTMLInputElement>`                                  | -          | Triggered when the value changes.                                                               |
+| onClear      | `() => void`                                                                  | -          | Triggered when the clear button is clicked.                                                     |
+| onPressEnter | `React.KeyboardEventHandler<HTMLInputElement>`                                | -          | Triggered when Enter is pressed.                                                                |
 
 ### TextArea
 
-| Property     | Type                                                       | Default       | Description                                                     |
-| ------------ | ---------------------------------------------------------- | ------------- | --------------------------------------------------------------- |
-| allowClear   | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false`       | Show a clear button for the current value.                      |
-| autoSize     | `boolean \| { minRows?: number; maxRows?: number }`        | `false`       | Auto resize height by content.                                  |
-| className    | `string`                                                   | -             | Class name for the textarea.                                    |
-| classNames   | `TextAreaProps['classNames']`                              | -             | Semantic class names for textarea slots.                        |
-| count        | `CountConfig`                                              | -             | Custom count strategy, limit, visibility, and exceed formatter. |
-| defaultValue | `string \| number \| readonly string[] \| bigint`          | -             | Initial textarea value.                                         |
-| maxLength    | `number`                                                   | -             | Native textarea `maxLength` attribute.                          |
-| prefixCls    | `string`                                                   | `rc-textarea` | Class name prefix.                                              |
-| showCount    | `boolean \| { formatter: ShowCountFormatter }`             | `false`       | Show character count. Prefer `count.show` for new code.         |
-| style        | `React.CSSProperties`                                      | -             | Inline styles for the textarea.                                 |
-| styles       | `TextAreaProps['styles']`                                  | -             | Semantic styles for textarea slots.                             |
-| suffix       | `ReactNode`                                                | -             | Suffix content inside the textarea wrapper.                     |
-| value        | `string \| number \| readonly string[] \| bigint`          | -             | Controlled textarea value.                                      |
-| onChange     | `React.ChangeEventHandler<HTMLTextAreaElement>`            | -             | Triggered when the value changes.                               |
-| onClear      | `() => void`                                               | -             | Triggered when the clear button is clicked.                     |
-| onPressEnter | `React.KeyboardEventHandler<HTMLTextAreaElement>`          | -             | Triggered when Enter is pressed.                                |
-| onResize     | `(size: { width: number; height: number }) => void`        | -             | Triggered when textarea size changes.                           |
+| Property     | Type                                                                          | Default       | Description                                                                                     |
+| ------------ | ----------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------- |
+| allowClear   | `boolean \| { disabled?: boolean; clearIcon?: ReactNode; tabIndex?: number }` | `false`       | Show a clear button for the current value. Set `tabIndex: -1` to skip it during Tab navigation. |
+| autoSize     | `boolean \| { minRows?: number; maxRows?: number }`                           | `false`       | Auto resize height by content.                                                                  |
+| className    | `string`                                                                      | -             | Class name for the textarea.                                                                    |
+| classNames   | `TextAreaProps['classNames']`                                                 | -             | Semantic class names for textarea slots.                                                        |
+| count        | `CountConfig`                                                                 | -             | Custom count strategy, limit, visibility, and exceed formatter.                                 |
+| defaultValue | `string \| number \| readonly string[] \| bigint`                             | -             | Initial textarea value.                                                                         |
+| maxLength    | `number`                                                                      | -             | Native textarea `maxLength` attribute.                                                          |
+| prefixCls    | `string`                                                                      | `rc-textarea` | Class name prefix.                                                                              |
+| showCount    | `boolean \| { formatter: ShowCountFormatter }`                                | `false`       | Show character count. Prefer `count.show` for new code.                                         |
+| style        | `React.CSSProperties`                                                         | -             | Inline styles for the textarea.                                                                 |
+| styles       | `TextAreaProps['styles']`                                                     | -             | Semantic styles for textarea slots.                                                             |
+| suffix       | `ReactNode`                                                                   | -             | Suffix content inside the textarea wrapper.                                                     |
+| value        | `string \| number \| readonly string[] \| bigint`                             | -             | Controlled textarea value.                                                                      |
+| onChange     | `React.ChangeEventHandler<HTMLTextAreaElement>`                               | -             | Triggered when the value changes.                                                               |
+| onClear      | `() => void`                                                                  | -             | Triggered when the clear button is clicked.                                                     |
+| onPressEnter | `React.KeyboardEventHandler<HTMLTextAreaElement>`                             | -             | Triggered when Enter is pressed.                                                                |
+| onResize     | `(size: { width: number; height: number }) => void`                           | -             | Triggered when textarea size changes.                                                           |
 
 ### Refs
 
diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index 29d309b..eebfa73 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { isReactRenderable } from '@rc-component/util';
 import type { ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
+import useAllowClear from './hooks/useAllowClear';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
@@ -37,6 +38,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
     onClear,
   } = props;
 
+  const [showAllowClear, allowClearConfig] = useAllowClear(allowClear);
   const inputElement = children ?? inputEl;
 
   const AffixWrapperComponent = components?.affixWrapper || 'span';
@@ -74,22 +76,18 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
   if (hasAffix) {
     // ================== Clear Icon ================== //
     let clearIcon: ReactNode = null;
-    if (allowClear) {
+    if (showAllowClear) {
       const needClear =
-        !disabled &&
-        !readOnly &&
-        value &&
-        !(typeof allowClear === 'object' && allowClear.disabled);
+        !disabled && !readOnly && value && !allowClearConfig.disabled;
       const clearIconCls = `${prefixCls}-clear-icon`;
-      const iconNode =
-        typeof allowClear === 'object' &&
-        isReactRenderable(allowClear?.clearIcon)
-          ? allowClear.clearIcon
-          : '✖';
+      const iconNode = isReactRenderable(allowClearConfig.clearIcon)
+        ? allowClearConfig.clearIcon
+        : '✖';
 
       clearIcon = (
         <button
           type="button"
+          tabIndex={allowClearConfig.tabIndex}
           onClick={(event) => {
             handleReset?.(event);
             onClear?.();
@@ -121,14 +119,14 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
         [`${affixWrapperPrefixCls}-focused`]: focused, // Not used, but keep it
         [`${affixWrapperPrefixCls}-readonly`]: readOnly,
         [`${affixWrapperPrefixCls}-input-with-clear-btn`]:
-          isReactRenderable(suffix) && allowClear && value,
+          isReactRenderable(suffix) && showAllowClear && value,
       },
       classes?.affixWrapper,
       classNames?.affixWrapper,
       classNames?.variant,
     );
 
-    const suffixNode = (isReactRenderable(suffix) || allowClear) && (
+    const suffixNode = (isReactRenderable(suffix) || showAllowClear) && (
       <span
         className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
         style={styles?.suffix}
diff --git a/src/hooks/useAllowClear.ts b/src/hooks/useAllowClear.ts
new file mode 100644
index 0000000..fb2f086
--- /dev/null
+++ b/src/hooks/useAllowClear.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { CommonInputProps } from '../interface';
+
+export default function useAllowClear(
+  allowClear: CommonInputProps['allowClear'],
+) {
+  return React.useMemo(
+    () =>
+      [!!allowClear, typeof allowClear === 'object' ? allowClear : {}] as const,
+    [allowClear],
+  );
+}
diff --git a/src/interface.ts b/src/interface.ts
index 0c87668..4709fcf 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -36,7 +36,8 @@ export interface CommonInputProps {
     suffix?: CSSProperties;
     clear?: CSSProperties;
   };
-  allowClear?: boolean | { disabled?: boolean; clearIcon?: ReactNode };
+  allowClear?:
+    boolean | { disabled?: boolean; clearIcon?: ReactNode; tabIndex?: number };
 }
 
 type DataAttr = Record<`data-${string}`, string>;
@@ -172,8 +173,7 @@ export interface ResizableTextAreaRef {
 }
 
 export type ValueOrTextAreaValue =
-  | TextareaHTMLAttributes<HTMLTextAreaElement>['value']
-  | bigint;
+  TextareaHTMLAttributes<HTMLTextAreaElement>['value'] | bigint;
 
 export type TextAreaProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
diff --git a/tests/allowClear.test.tsx b/tests/allowClear.test.tsx
new file mode 100644
index 0000000..1b0f083
--- /dev/null
+++ b/tests/allowClear.test.tsx
@@ -0,0 +1,134 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import Input, { TextArea } from '../src';
+
+describe.each([
+  ['Input', Input],
+  ['TextArea', TextArea],
+] as const)('%s allowClear', (_, Component) => {
+  it.each([false, undefined])(
+    'distinguishes allowClear=%s from a disabled clear button',
+    (allowClear) => {
+      const { container, getByRole, queryByRole, rerender } = render(
+        <Component
+          prefixCls="rc-input"
+          defaultValue="test"
+          suffix="suffix"
+          allowClear={allowClear}
+        />,
+      );
+      expect(queryByRole('button')).toBeNull();
+      expect(container.firstChild).not.toHaveClass(
+        'rc-input-affix-wrapper-input-with-clear-btn',
+      );
+
+      rerender(
+        <Component
+          prefixCls="rc-input"
+          defaultValue="test"
+          suffix="suffix"
+          allowClear={{ disabled: true, clearIcon: 'clear', tabIndex: -1 }}
+        />,
+      );
+      const clearButton = getByRole('button');
+      expect(clearButton).toHaveClass('rc-input-clear-icon-hidden');
+      expect(clearButton).toHaveTextContent('clear');
+      expect(clearButton.tabIndex).toBe(-1);
+      expect(container.firstChild).toHaveClass(
+        'rc-input-affix-wrapper-input-with-clear-btn',
+      );
+
+      rerender(
+        <Component
+          prefixCls="rc-input"
+          defaultValue="test"
+          suffix="suffix"
+          allowClear
+        />,
+      );
+      expect(getByRole('button')).toBe(clearButton);
+      expect(clearButton).not.toHaveClass('rc-input-clear-icon-hidden');
+      expect(clearButton).toHaveTextContent('✖');
+      expect(clearButton.tabIndex).toBe(0);
+
+      rerender(
+        <Component
+          prefixCls="rc-input"
+          defaultValue="test"
+          suffix="suffix"
+          allowClear={allowClear}
+        />,
+      );
+      expect(queryByRole('button')).toBeNull();
+      expect(container.firstChild).not.toHaveClass(
+        'rc-input-affix-wrapper-input-with-clear-btn',
+      );
+    },
+  );
+
+  it.each([true, {}, { tabIndex: 0 }])(
+    'keeps the clear button keyboard accessible with %j',
+    async (allowClear) => {
+      const user = userEvent.setup();
+      const { getByRole } = render(
+        <Component defaultValue="test" allowClear={allowClear} />,
+      );
+
+      await user.tab();
+      expect(getByRole('textbox')).toHaveFocus();
+      await user.tab();
+      expect(getByRole('button')).toHaveFocus();
+      await user.keyboard('[Enter]');
+      expect(getByRole('textbox')).toHaveValue('');
+      expect(getByRole('textbox')).toHaveFocus();
+    },
+  );
+
+  it('skips the clear button in both tab directions while allowing click to clear', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const onClear = jest.fn();
+    const { getAllByRole, getByRole } = render(
+      <>
+        <Component
+          defaultValue="test"
+          allowClear={{ tabIndex: -1 }}
+          onChange={onChange}
+          onClear={onClear}
+        />
+        <Component />
+      </>,
+    );
+    const [first, second] = getAllByRole('textbox');
+
+    await user.tab();
+    expect(first).toHaveFocus();
+    await user.tab();
+    expect(second).toHaveFocus();
+    await user.tab({ shift: true });
+    expect(first).toHaveFocus();
+
+    await user.click(getByRole('button'));
+    expect(first).toHaveValue('');
+    expect(first).toHaveFocus();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates the clear button tabIndex independently of the input', () => {
+    const { getByRole, rerender } = render(
+      <Component
+        defaultValue="test"
+        tabIndex={3}
+        allowClear={{ tabIndex: 2 }}
+      />,
+    );
+    expect(getByRole('button').tabIndex).toBe(2);
+    expect(getByRole('textbox').tabIndex).toBe(3);
+
+    rerender(<Component defaultValue="test" tabIndex={3} allowClear />);
+    expect(getByRole('button').tabIndex).toBe(0);
+    expect(getByRole('textbox').tabIndex).toBe(3);
+  });
+});