diff --git a/app/client/src/WidgetProvider/factory/helpers.tabOrder.test.ts b/app/client/src/WidgetProvider/factory/helpers.tabOrder.test.ts
new file mode 100644
index 000000000000..f580adae5231
--- /dev/null
+++ b/app/client/src/WidgetProvider/factory/helpers.tabOrder.test.ts
@@ -0,0 +1,249 @@
+import type {
+  PropertyPaneConfig,
+  PropertyPaneControlConfig,
+  PropertyPaneSectionConfig,
+} from "constants/PropertyControlConstants";
+import { ValidationTypes } from "constants/WidgetValidation";
+import { loadAllWidgets } from "widgets";
+import WidgetFactory from "WidgetProvider/factory";
+import { registerWidgets } from "WidgetProvider/factory/registrationHelper";
+import type { WidgetProps } from "widgets/BaseWidget";
+import {
+  addTabOrderToPropertyPaneConfig,
+  createTabOrderPropertyPaneSection,
+  shouldExposeTabOrderProperty,
+  TAB_ORDER_PROPERTY_NAME,
+  TAB_ORDER_SECTION_NAME,
+} from "./helpers";
+
+function collectTabOrderControls(
+  config: readonly PropertyPaneConfig[],
+): PropertyPaneControlConfig[] {
+  const controls: PropertyPaneControlConfig[] = [];
+
+  for (const item of config) {
+    const control = item as PropertyPaneControlConfig;
+
+    if (control.propertyName === TAB_ORDER_PROPERTY_NAME) {
+      controls.push(control);
+    }
+
+    if (item.children) {
+      controls.push(...collectTabOrderControls(item.children));
+    }
+  }
+
+  return controls;
+}
+
+function assertSharedTabOrderControl(control: PropertyPaneControlConfig) {
+  expect(control.label).toBe("Tab order");
+  expect(control.helpText).toBe(
+    "Optional. Lower numbers receive keyboard focus first, among widgets in the same container. Leave blank for automatic order. Fields inside a form follow the form's own order.",
+  );
+  expect(control.controlType).toBe("CLEARABLE_NUMERIC_INPUT");
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  expect((control as any).placeholderText).toBe("Auto");
+  expect(control.isJSConvertible).toBe(false);
+  expect(control.isBindProperty).toBe(false);
+  expect(control.isTriggerProperty).toBe(false);
+  expect(control.validation).toEqual({
+    type: ValidationTypes.NUMBER,
+    params: { min: 0, natural: true },
+  });
+}
+
+describe("shouldExposeTabOrderProperty", () => {
+  it("includes focusable / interactive standard non-Anvil widgets", () => {
+    for (const type of [
+      "BUTTON_WIDGET",
+      "INPUT_WIDGET_V2",
+      "TABLE_WIDGET_V2",
+      "CONTAINER_WIDGET",
+      "MODAL_WIDGET",
+      "JSON_FORM_WIDGET",
+      "CHECKBOX_GROUP_WIDGET",
+      // native <audio>/<video> controls are focusable
+      "AUDIO_WIDGET",
+      "VIDEO_WIDGET",
+    ]) {
+      expect(shouldExposeTabOrderProperty(type)).toBe(true);
+    }
+  });
+
+  it("excludes Anvil-only and internal widgets", () => {
+    for (const type of [
+      "WDS_BUTTON_WIDGET",
+      "WDS_INPUT_WIDGET",
+      "WDS_MODAL_WIDGET",
+      "SECTION_WIDGET",
+      "ZONE_WIDGET",
+      "CANVAS_WIDGET",
+      "SKELETON_WIDGET",
+      "TABS_MIGRATOR_WIDGET",
+    ]) {
+      expect(shouldExposeTabOrderProperty(type)).toBe(false);
+    }
+  });
+
+  it("excludes display-only widgets that have nothing focusable", () => {
+    for (const type of [
+      "TEXT_WIDGET",
+      "RATE_WIDGET",
+      "IMAGE_WIDGET",
+      "CHART_WIDGET",
+      "MAP_CHART_WIDGET",
+      "DIVIDER_WIDGET",
+      "STATBOX_WIDGET",
+      "DOCUMENT_VIEWER_WIDGET",
+      "ICON_WIDGET",
+      "PROGRESSBAR_WIDGET",
+      "PROGRESS_WIDGET",
+      "CIRCULAR_PROGRESS_WIDGET",
+    ]) {
+      expect(shouldExposeTabOrderProperty(type)).toBe(false);
+    }
+  });
+});
+
+describe("addTabOrderToPropertyPaneConfig", () => {
+  const sampleConfig = (): PropertyPaneConfig[] => [
+    { sectionName: "General", children: [] } as PropertyPaneSectionConfig,
+  ];
+
+  it("appends the shared Accessibility section for eligible widgets", () => {
+    const result = addTabOrderToPropertyPaneConfig(
+      "BUTTON_WIDGET",
+      sampleConfig(),
+    );
+
+    expect(result).toHaveLength(2);
+    expect((result[1] as PropertyPaneSectionConfig).sectionName).toBe(
+      TAB_ORDER_SECTION_NAME,
+    );
+
+    const controls = collectTabOrderControls(result);
+
+    expect(controls).toHaveLength(1);
+    assertSharedTabOrderControl(controls[0]);
+  });
+
+  it("returns a fresh section object on each call", () => {
+    const first = createTabOrderPropertyPaneSection();
+    const second = createTabOrderPropertyPaneSection();
+
+    expect(first).not.toBe(second);
+    expect(first.children[0]).not.toBe(second.children[0]);
+    expect(first).toEqual(second);
+  });
+
+  it("does not touch excluded widget types", () => {
+    const config = sampleConfig();
+
+    expect(addTabOrderToPropertyPaneConfig("WDS_BUTTON_WIDGET", config)).toBe(
+      config,
+    );
+    expect(addTabOrderToPropertyPaneConfig("CANVAS_WIDGET", config)).toBe(
+      config,
+    );
+  });
+
+  it("does not add a property pane to widgets without one", () => {
+    expect(addTabOrderToPropertyPaneConfig("BUTTON_WIDGET", [])).toEqual([]);
+  });
+});
+
+describe("shared tabOrder property exposure across all widgets", () => {
+  beforeAll(async () => {
+    const widgetsMap = await loadAllWidgets();
+
+    registerWidgets(Array.from(widgetsMap.values()));
+  });
+
+  it("classifies every registered widget the same way (standard non-Anvil expose, Anvil/internal do not)", () => {
+    const types = WidgetFactory.getWidgetTypes();
+
+    expect(types.length).toBeGreaterThan(0);
+
+    const excludedTypes = [
+      // Anvil-only / internal
+      "CANVAS_WIDGET",
+      "SKELETON_WIDGET",
+      "TABS_MIGRATOR_WIDGET",
+      "SECTION_WIDGET",
+      "ZONE_WIDGET",
+      // display-only / non-focusable
+      "TEXT_WIDGET",
+      "RATE_WIDGET",
+      "IMAGE_WIDGET",
+      "CHART_WIDGET",
+      "MAP_CHART_WIDGET",
+      "DIVIDER_WIDGET",
+      "STATBOX_WIDGET",
+      "DOCUMENT_VIEWER_WIDGET",
+      "ICON_WIDGET",
+      "PROGRESSBAR_WIDGET",
+      "PROGRESS_WIDGET",
+      "CIRCULAR_PROGRESS_WIDGET",
+    ];
+    let exposedCount = 0;
+
+    for (const type of types) {
+      const expected =
+        !type.startsWith("WDS_") && !excludedTypes.includes(type);
+
+      expect({ type, expose: shouldExposeTabOrderProperty(type) }).toEqual({
+        type,
+        expose: expected,
+      });
+
+      if (expected) exposedCount++;
+    }
+
+    // sanity check that the shared property is broadly exposed
+    expect(exposedCount).toBeGreaterThan(30);
+  });
+
+  // End-to-end wiring: the factory actually appends the shared section. Uses
+  // widgets with static property panes so getWidgetPropertyPaneConfig does not
+  // invoke dynamic-property generators with empty props.
+  it("appends the shared section in the factory for standard widgets", () => {
+    for (const type of ["BUTTON_WIDGET", "SWITCH_WIDGET", "CHECKBOX_WIDGET"]) {
+      const config = WidgetFactory.getWidgetPropertyPaneConfig(
+        type,
+        {} as WidgetProps,
+      );
+      const controls = collectTabOrderControls(config);
+
+      expect({ type, count: controls.length }).toEqual({ type, count: 1 });
+      assertSharedTabOrderControl(controls[0]);
+
+      const accessibilitySection = config.find(
+        (item) =>
+          (item as PropertyPaneSectionConfig).sectionName ===
+          TAB_ORDER_SECTION_NAME,
+      );
+
+      expect({ type, hasSection: !!accessibilitySection }).toEqual({
+        type,
+        hasSection: true,
+      });
+    }
+  });
+
+  it("does not expose tabOrder on Anvil-only, internal, or display-only widgets", () => {
+    for (const type of [
+      "WDS_BUTTON_WIDGET",
+      "CANVAS_WIDGET",
+      "DIVIDER_WIDGET",
+    ]) {
+      const config = WidgetFactory.getWidgetPropertyPaneConfig(
+        type,
+        {} as WidgetProps,
+      );
+
+      expect(collectTabOrderControls(config)).toHaveLength(0);
+    }
+  });
+});
diff --git a/app/client/src/WidgetProvider/factory/helpers.ts b/app/client/src/WidgetProvider/factory/helpers.ts
index 68403dd243cc..d94a6905a3d7 100644
--- a/app/client/src/WidgetProvider/factory/helpers.ts
+++ b/app/client/src/WidgetProvider/factory/helpers.ts
@@ -17,7 +17,10 @@ import {
   WidgetFeaturePropertyPaneEnhancements,
 } from "../../utils/WidgetFeatures";
 import { generateReactKey } from "utils/generators";
-import { DEFAULT_WIDGET_ON_CANVAS_UI } from "widgets/wds/constants";
+import {
+  anvilWidgets,
+  DEFAULT_WIDGET_ON_CANVAS_UI,
+} from "widgets/wds/constants";
 import type { WidgetDefaultProps } from "WidgetProvider/types";
 
 export enum PropertyPaneConfigTypes {
@@ -338,3 +341,106 @@ export function getDefaultOnCanvasUIConfig(config: WidgetDefaultProps) {
     disableParentSelection: !!config.detachFromLayout,
   };
 }
+
+/* Shared platform-level `tabOrder` property pane plumbing.
+
+   This lives here (rather than in a standalone module) so the WidgetFactory can
+   compose it without introducing a new circular dependency: helpers.ts already
+   imports PropertyControlConstants, WidgetValidation, ./types and
+   widgets/wds/constants, so reusing them adds no new import edges.
+*/
+
+export const TAB_ORDER_PROPERTY_NAME = "tabOrder";
+export const TAB_ORDER_SECTION_NAME = "Accessibility";
+
+/**
+ * Widget types that must not expose the shared `tabOrder` property:
+ * internal wrappers and Anvil-only layout widgets. All WDS_* (Anvil) widgets
+ * are excluded by prefix in shouldExposeTabOrderProperty.
+ */
+const TAB_ORDER_EXCLUDED_WIDGET_TYPES: string[] = [
+  "CANVAS_WIDGET",
+  "SKELETON_WIDGET",
+  "TABS_MIGRATOR_WIDGET",
+  anvilWidgets.SECTION_WIDGET,
+  anvilWidgets.ZONE_WIDGET,
+];
+
+/**
+ * Display-only widgets that have no focusable element. The platform's custom
+ * Tab handler skips them at runtime, so the `tabOrder` property would be a
+ * no-op — hide it to avoid confusing the builder.
+ */
+const TAB_ORDER_NON_FOCUSABLE_WIDGET_TYPES: string[] = [
+  // both are already excluded from tabbing at runtime via NON_FOCUSABLE_WIDGET_CLASS
+  "TEXT_WIDGET",
+  "RATE_WIDGET",
+  "IMAGE_WIDGET",
+  "CHART_WIDGET",
+  "MAP_CHART_WIDGET",
+  "DIVIDER_WIDGET",
+  "STATBOX_WIDGET",
+  "DOCUMENT_VIEWER_WIDGET",
+  "ICON_WIDGET",
+  "PROGRESSBAR_WIDGET",
+  "PROGRESS_WIDGET",
+  "CIRCULAR_PROGRESS_WIDGET",
+];
+
+export function shouldExposeTabOrderProperty(type: WidgetType): boolean {
+  if (!type) return false;
+
+  if (type.startsWith("WDS_")) return false;
+
+  if (TAB_ORDER_EXCLUDED_WIDGET_TYPES.includes(type)) return false;
+
+  return !TAB_ORDER_NON_FOCUSABLE_WIDGET_TYPES.includes(type);
+}
+
+/**
+ * Returns a fresh copy of the shared Accessibility section so that the
+ * id-generation and enhancement steps in WidgetFactory never mutate an
+ * object shared across widget types.
+ */
+export function createTabOrderPropertyPaneSection() {
+  return {
+    sectionName: TAB_ORDER_SECTION_NAME,
+    children: [
+      {
+        propertyName: TAB_ORDER_PROPERTY_NAME,
+        label: "Tab order",
+        helpText:
+          "Optional. Lower numbers receive keyboard focus first, among widgets in the same container. Leave blank for automatic order. Fields inside a form follow the form's own order.",
+        controlType: "CLEARABLE_NUMERIC_INPUT",
+        placeholderText: "Auto",
+        min: 0,
+        isJSConvertible: false,
+        isBindProperty: false,
+        isTriggerProperty: false,
+        validation: {
+          type: ValidationTypes.NUMBER,
+          params: {
+            min: 0,
+            natural: true,
+          },
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * Appends the shared Accessibility > Tab order section to a widget's property
+ * pane configuration. Widgets without a property pane and excluded widget
+ * types are left untouched.
+ */
+export function addTabOrderToPropertyPaneConfig(
+  type: WidgetType,
+  config: PropertyPaneConfig[],
+): PropertyPaneConfig[] {
+  if (!shouldExposeTabOrderProperty(type)) return config;
+
+  if (!Array.isArray(config) || config.length === 0) return config;
+
+  return [...config, createTabOrderPropertyPaneSection()];
+}
diff --git a/app/client/src/WidgetProvider/factory/index.tsx b/app/client/src/WidgetProvider/factory/index.tsx
index dfb7ba9b4f9d..904346a25c36 100644
--- a/app/client/src/WidgetProvider/factory/index.tsx
+++ b/app/client/src/WidgetProvider/factory/index.tsx
@@ -18,6 +18,7 @@ import type {
 import {
   addPropertyConfigIds,
   addSearchConfigToPanelConfig,
+  addTabOrderToPropertyPaneConfig,
   convertFunctionsToString,
   enhancePropertyPaneConfig,
   generatePropertyPaneSearchConfig,
@@ -326,7 +327,10 @@ export class WidgetFactory {
         convertFunctionsToString,
         addPropertyConfigIds,
       ]);
-      const enhancedPropertyPaneConfig = enhance(propertyPaneConfig, features);
+      const enhancedPropertyPaneConfig = enhance(
+        addTabOrderToPropertyPaneConfig(type, propertyPaneConfig),
+        features,
+      );
 
       return enhancedPropertyPaneConfig;
     }
@@ -377,7 +381,7 @@ export class WidgetFactory {
       ]);
 
       const enhancedPropertyPaneContentConfig = enhance(
-        propertyPaneContentConfig,
+        addTabOrderToPropertyPaneConfig(type, propertyPaneContentConfig),
         features,
         PropertyPaneConfigTypes.CONTENT,
         type,
diff --git a/app/client/src/components/designSystems/appsmith/PositionedContainer.test.tsx b/app/client/src/components/designSystems/appsmith/PositionedContainer.test.tsx
new file mode 100644
index 000000000000..1bc209c3c9c0
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/PositionedContainer.test.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+// Default export is the forwardRef-wrapped component; the raw named function
+// receives legacy context (frozen) as its 2nd arg and mishandles the ref.
+import PositionedContainer from "./PositionedContainer";
+import type { PositionedContainerProps } from "./PositionedContainer";
+
+jest.mock("react-redux", () => ({
+  useSelector: jest.fn(() => undefined),
+  // redux-form (pulled in transitively via the reflow selectors) calls
+  // connect() at import time; provide a passthrough HOC so the suite loads.
+  connect: () => (component: unknown) => component,
+}));
+
+jest.mock("utils/hooks/useClickToSelectWidget", () => ({
+  useClickToSelectWidget: () => jest.fn(),
+}));
+
+jest.mock("utils/hooks/usePositionedContainerZIndex", () => ({
+  usePositionedContainerZIndex: () => ({ onHoverZIndex: 1, zIndex: 1 }),
+}));
+
+jest.mock("utils/hooks/useHoverToFocusWidget", () => ({
+  useHoverToFocusWidget: () => [jest.fn(), jest.fn()],
+}));
+
+jest.mock("WidgetProvider/factory/helpers", () => ({
+  checkIsDropTarget: () => false,
+}));
+
+function renderContainer(tabOrder?: PositionedContainerProps["tabOrder"]) {
+  const props: PositionedContainerProps = {
+    componentWidth: 100,
+    componentHeight: 40,
+    children: null,
+    widgetId: "widget1",
+    widgetType: "INPUT_WIDGET_V2",
+    topRow: 0,
+    parentRowSpace: 10,
+    leftColumn: 0,
+    parentColumnSpace: 10,
+    isVisible: true,
+    widgetName: "Input1",
+    tabOrder,
+  };
+
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { container } = render(
+    // TODO: Fix this the next time the file is edited
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(PositionedContainer as any, props),
+  );
+
+  return container.firstChild as HTMLElement;
+}
+
+describe("PositionedContainer data-tab-order", () => {
+  it("renders the attribute for a valid explicit value", () => {
+    expect(renderContainer(2)).toHaveAttribute("data-tab-order", "2");
+  });
+
+  it("renders the attribute for 0", () => {
+    expect(renderContainer(0)).toHaveAttribute("data-tab-order", "0");
+  });
+
+  it("accepts valid numeric strings", () => {
+    expect(renderContainer("4")).toHaveAttribute("data-tab-order", "4");
+  });
+
+  it("does not render the attribute when tabOrder is missing", () => {
+    expect(renderContainer(undefined)).not.toHaveAttribute("data-tab-order");
+  });
+
+  it("does not render the attribute when tabOrder is null", () => {
+    expect(renderContainer(null)).not.toHaveAttribute("data-tab-order");
+  });
+
+  it("does not render the attribute for blank strings", () => {
+    expect(renderContainer("")).not.toHaveAttribute("data-tab-order");
+    expect(renderContainer("   ")).not.toHaveAttribute("data-tab-order");
+  });
+
+  it("does not render the attribute for invalid values", () => {
+    expect(renderContainer(-1)).not.toHaveAttribute("data-tab-order");
+    expect(renderContainer(1.5)).not.toHaveAttribute("data-tab-order");
+    expect(renderContainer("abc")).not.toHaveAttribute("data-tab-order");
+    expect(renderContainer(NaN)).not.toHaveAttribute("data-tab-order");
+    expect(renderContainer(Infinity)).not.toHaveAttribute("data-tab-order");
+  });
+
+  it("never renders a native tabindex from tabOrder", () => {
+    expect(renderContainer(2)).not.toHaveAttribute("tabindex");
+  });
+});
diff --git a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
index 709a7d824176..c2b46b0f5e51 100644
--- a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
+++ b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
@@ -22,6 +22,7 @@ import equal from "fast-deep-equal";
 import { widgetTypeClassname } from "widgets/WidgetUtils";
 import { checkIsDropTarget } from "WidgetProvider/factory/helpers";
 import { useHoverToFocusWidget } from "utils/hooks/useHoverToFocusWidget";
+import { sanitizeTabOrder } from "utils/widgetTabOrder";
 
 const PositionedWidget = styled.div<{
   zIndexOnHover: number;
@@ -50,6 +51,7 @@ export interface PositionedContainerProps {
   isDisabled?: boolean;
   isVisible?: boolean;
   widgetName: string;
+  tabOrder?: number | string | null;
 }
 
 export function PositionedContainer(
@@ -165,11 +167,15 @@ export function PositionedContainer(
     props.resizeDisabled,
   );
 
+  // valid explicit values only; Auto/invalid values must not emit the attribute
+  const tabOrder = sanitizeTabOrder(props.tabOrder);
+
   // TODO: Experimental fix for sniping mode. This should be handled with a single event
   return (
     <PositionedWidget
       className={containerClassName}
       data-hidden={!props.isVisible || undefined}
+      data-tab-order={tabOrder}
       data-testid="test-widget"
       data-widgetname-cy={props.widgetName}
       disabled={props.isDisabled}
diff --git a/app/client/src/components/propertyControls/ClearableNumericInputControl.test.tsx b/app/client/src/components/propertyControls/ClearableNumericInputControl.test.tsx
new file mode 100644
index 000000000000..b9832bef2e97
--- /dev/null
+++ b/app/client/src/components/propertyControls/ClearableNumericInputControl.test.tsx
@@ -0,0 +1,152 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import ClearableNumericInputControl from "./ClearableNumericInputControl";
+import type { ClearableNumericInputControlProps } from "./ClearableNumericInputControl";
+
+function renderControl(props: Partial<ClearableNumericInputControlProps> = {}) {
+  const onPropertyChange = jest.fn();
+  const deleteProperties = jest.fn();
+
+  const controlProps = {
+    evaluatedValue: undefined,
+    widgetProperties: { type: "BUTTON_WIDGET" },
+    parentPropertyName: "",
+    parentPropertyValue: undefined,
+    additionalDynamicData: {},
+    label: "Numeric",
+    propertyName: "numericProp",
+    controlType: "CLEARABLE_NUMERIC_INPUT",
+    isBindProperty: false,
+    isTriggerProperty: false,
+    placeholderText: "Auto",
+    min: 0,
+    onPropertyChange,
+    deleteProperties,
+    openNextPanel: jest.fn(),
+    // TODO: Fix this the next time the file is edited
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    theme: "LIGHT" as any,
+    ...props,
+  } as ClearableNumericInputControlProps;
+
+  const utils = render(<ClearableNumericInputControl {...controlProps} />);
+
+  return { ...utils, onPropertyChange, deleteProperties };
+}
+
+function getInput() {
+  return screen.getByRole("textbox") as HTMLInputElement;
+}
+
+describe("ClearableNumericInputControl", () => {
+  it("persists a numeric value as a number", () => {
+    const { onPropertyChange } = renderControl();
+
+    fireEvent.change(getInput(), { target: { value: "5" } });
+
+    expect(onPropertyChange).toHaveBeenCalledWith(
+      "numericProp",
+      5,
+      expect.anything(),
+    );
+  });
+
+  it("persists 0", () => {
+    const { onPropertyChange } = renderControl();
+
+    fireEvent.change(getInput(), { target: { value: "0" } });
+
+    expect(onPropertyChange).toHaveBeenCalledWith(
+      "numericProp",
+      0,
+      expect.anything(),
+    );
+  });
+
+  it("removes the property from the DSL when the field is cleared", () => {
+    const { deleteProperties, onPropertyChange } = renderControl({
+      propertyValue: 3,
+    });
+
+    fireEvent.change(getInput(), { target: { value: "" } });
+
+    expect(deleteProperties).toHaveBeenCalledWith(["numericProp"]);
+    expect(onPropertyChange).not.toHaveBeenCalled();
+  });
+
+  it("does not dispatch a delete when clearing an already-unset field", () => {
+    const { deleteProperties, onPropertyChange } = renderControl();
+
+    fireEvent.change(getInput(), { target: { value: "" } });
+
+    expect(deleteProperties).not.toHaveBeenCalled();
+    expect(onPropertyChange).not.toHaveBeenCalled();
+  });
+
+  it("persists the entered value as-is, leaving range/format checks to the property validation", () => {
+    const { onPropertyChange } = renderControl();
+
+    fireEvent.change(getInput(), { target: { value: "1.5" } });
+
+    expect(onPropertyChange).toHaveBeenCalledWith(
+      "numericProp",
+      1.5,
+      expect.anything(),
+    );
+  });
+
+  it("clamps to the configured minimum instead of persisting a smaller value", () => {
+    const { onPropertyChange } = renderControl({ min: 0 });
+
+    fireEvent.change(getInput(), { target: { value: "-3" } });
+
+    // the NumberInput clamps to min=0, so a negative value is never persisted
+    expect(onPropertyChange).toHaveBeenCalledWith(
+      "numericProp",
+      0,
+      expect.anything(),
+    );
+  });
+
+  it("shows the placeholder when the value is unset", () => {
+    renderControl();
+
+    expect(getInput().placeholder).toBe("Auto");
+    expect(getInput().value).toBe("");
+  });
+
+  describe("canDisplayValueInUI", () => {
+    const config = {
+      evaluatedValue: undefined,
+      widgetProperties: undefined,
+      parentPropertyName: "",
+      parentPropertyValue: undefined,
+      additionalDynamicData: {},
+      label: "",
+      propertyName: "",
+      controlType: "",
+      isBindProperty: false,
+      isTriggerProperty: false,
+    };
+
+    it("returns true for numeric values and false for blank/non-numeric", () => {
+      expect(
+        ClearableNumericInputControl.canDisplayValueInUI(config, "0"),
+      ).toBe(true);
+      expect(ClearableNumericInputControl.canDisplayValueInUI(config, 3)).toBe(
+        true,
+      );
+      expect(
+        ClearableNumericInputControl.canDisplayValueInUI(config, "1.5"),
+      ).toBe(true);
+      expect(
+        ClearableNumericInputControl.canDisplayValueInUI(config, "abc"),
+      ).toBe(false);
+      expect(ClearableNumericInputControl.canDisplayValueInUI(config, "")).toBe(
+        false,
+      );
+    });
+  });
+});
diff --git a/app/client/src/components/propertyControls/ClearableNumericInputControl.tsx b/app/client/src/components/propertyControls/ClearableNumericInputControl.tsx
new file mode 100644
index 000000000000..6461ab7a3e6b
--- /dev/null
+++ b/app/client/src/components/propertyControls/ClearableNumericInputControl.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { NumberInput } from "@appsmith/ads";
+
+import type { ControlData, ControlProps } from "./BaseControl";
+import BaseControl from "./BaseControl";
+
+export interface ClearableNumericInputControlProps extends ControlProps {
+  propertyValue?: number | string;
+  min?: number;
+  max?: number;
+  placeholderText?: string;
+}
+
+/**
+ * Numeric input that treats an empty field as "unset": clearing the field
+ * removes the property from the DSL instead of persisting a blank value, so a
+ * blank field means the property is not set.
+ *
+ * It is intentionally generic — non-numeric input is rejected by the underlying
+ * NumberInput, and range/format validation of the entered value is left to the
+ * property's own `validation` config (e.g. `{ min, natural }`).
+ */
+class ClearableNumericInputControl extends BaseControl<ClearableNumericInputControlProps> {
+  inputElement: HTMLInputElement | null = null;
+
+  static getControlType() {
+    return "CLEARABLE_NUMERIC_INPUT";
+  }
+
+  public render() {
+    const { max, min, placeholderText, propertyValue } = this.props;
+
+    return (
+      <NumberInput
+        max={max}
+        min={min}
+        onChange={this.handleValueChange}
+        placeholder={placeholderText}
+        ref={(element: HTMLInputElement) => {
+          this.inputElement = element;
+        }}
+        value={
+          propertyValue === undefined || propertyValue === null
+            ? ""
+            : String(propertyValue)
+        }
+      />
+    );
+  }
+
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static canDisplayValueInUI(config: ControlData, value: any): boolean {
+    return (
+      value !== "" &&
+      value !== null &&
+      value !== undefined &&
+      !isNaN(Number(value))
+    );
+  }
+
+  private handleValueChange = (value: string | undefined) => {
+    const { propertyName, propertyValue } = this.props;
+
+    if (value === undefined || value.trim() === "") {
+      // Clearing the field unsets the property instead of persisting a blank
+      if (propertyValue !== undefined && propertyValue !== null) {
+        this.deleteProperties([propertyName]);
+      }
+
+      return;
+    }
+
+    const parsed = Number(value);
+
+    if (isNaN(parsed)) return;
+
+    this.updateProperty(
+      propertyName,
+      parsed,
+      document.activeElement === this.inputElement,
+    );
+  };
+}
+
+export default ClearableNumericInputControl;
diff --git a/app/client/src/components/propertyControls/index.ts b/app/client/src/components/propertyControls/index.ts
index 0b84a4bf9bda..82b53d277642 100644
--- a/app/client/src/components/propertyControls/index.ts
+++ b/app/client/src/components/propertyControls/index.ts
@@ -45,6 +45,8 @@ import ButtonControl from "./ButtonControl";
 import LabelAlignmentOptionsControl from "./LabelAlignmentOptionsControl";
 import type { NumericInputControlProps } from "./NumericInputControl";
 import NumericInputControl from "./NumericInputControl";
+import type { ClearableNumericInputControlProps } from "./ClearableNumericInputControl";
+import ClearableNumericInputControl from "./ClearableNumericInputControl";
 import PrimaryColumnsControlV2 from "components/propertyControls/PrimaryColumnsControlV2";
 import type { SelectDefaultValueControlProps } from "./SelectDefaultValueControl";
 import SelectDefaultValueControl from "./SelectDefaultValueControl";
@@ -118,6 +120,7 @@ export const PropertyControls = {
   ButtonControl,
   LabelAlignmentOptionsControl,
   NumericInputControl,
+  ClearableNumericInputControl,
   PrimaryColumnColorPickerControl,
   PrimaryColumnColorPickerControlV2,
   SelectDefaultValueControl,
@@ -152,6 +155,7 @@ export type PropertyControlPropsType =
   | ComputeTablePropertyControlProps
   | PrimaryColumnDropdownControlProps
   | NumericInputControlProps
+  | ClearableNumericInputControlProps
   | PrimaryColumnColorPickerControlProps
   | ComputeTablePropertyControlPropsV2
   | MenuButtonDynamicItemsControlProps
diff --git a/app/client/src/layoutSystems/fixedlayout/common/PositionedComponentLayer.tsx b/app/client/src/layoutSystems/fixedlayout/common/PositionedComponentLayer.tsx
index 6a7cd8726509..badf1d05fbcb 100644
--- a/app/client/src/layoutSystems/fixedlayout/common/PositionedComponentLayer.tsx
+++ b/app/client/src/layoutSystems/fixedlayout/common/PositionedComponentLayer.tsx
@@ -18,6 +18,7 @@ export const PositionedComponentLayer = (props: BaseWidgetProps) => {
       ref={props.wrapperRef}
       resizeDisabled={props.resizeDisabled}
       selected={props.selected}
+      tabOrder={props.tabOrder}
       topRow={props.topRow}
       widgetId={props.widgetId}
       widgetName={props.widgetName}
diff --git a/app/client/src/utils/hooks/useWidgetFocus/tabbable.test.ts b/app/client/src/utils/hooks/useWidgetFocus/tabbable.test.ts
index 84d355b160bf..adab0c092c93 100644
--- a/app/client/src/utils/hooks/useWidgetFocus/tabbable.test.ts
+++ b/app/client/src/utils/hooks/useWidgetFocus/tabbable.test.ts
@@ -1,7 +1,534 @@
-import { getNextTabbableDescendant } from "./tabbable";
+import { TAB_ORDER_ATTRIBUTE } from "utils/widgetTabOrder";
+import {
+  getExplicitTabOrder,
+  getNextTabbableDescendant,
+  getTabbableDescendants,
+  sortTabbableWidgets,
+  sortWidgetsByPosition,
+} from "./tabbable";
+
+interface Rect {
+  top: number;
+  left: number;
+  width?: number;
+  height?: number;
+}
+
+function mockRect(element: HTMLElement, rect: Rect) {
+  const { height = 40, left, top, width = 100 } = rect;
+
+  element.getBoundingClientRect = () =>
+    ({
+      top,
+      left,
+      bottom: top + height,
+      right: left + width,
+      width,
+      height,
+      x: left,
+      y: top,
+      toJSON: () => ({}),
+    }) as DOMRect;
+}
+
+function createCanvas(
+  parent: HTMLElement = document.body,
+  rect: Rect = { top: 0, left: 0, width: 1000, height: 1000 },
+) {
+  const canvas = document.createElement("div");
+
+  canvas.setAttribute("type", "CANVAS_WIDGET");
+  mockRect(canvas, rect);
+  parent.appendChild(canvas);
+
+  return canvas;
+}
+
+function createWidget(
+  parent: HTMLElement,
+  rect: Rect,
+  options: {
+    tabOrder?: string;
+    widgetClass?: string;
+    withInput?: boolean;
+  } = {},
+) {
+  const {
+    tabOrder,
+    widgetClass = "t--widget-inputwidgetv2",
+    withInput = true,
+  } = options;
+  const widget = document.createElement("div");
+
+  widget.className = `positioned-widget ${widgetClass}`;
+  mockRect(widget, rect);
+
+  if (tabOrder !== undefined) {
+    widget.setAttribute(TAB_ORDER_ATTRIBUTE, tabOrder);
+  }
+
+  if (withInput) {
+    const input = document.createElement("input");
+
+    widget.appendChild(input);
+  }
+
+  parent.appendChild(widget);
+
+  return widget;
+}
+
+function inputOf(widget: HTMLElement): HTMLInputElement {
+  return widget.querySelector("input") as HTMLInputElement;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
 
 describe("getNextTabbableDescendant", () => {
   it("should return undefined if no descendants are passed", () => {
     expect(getNextTabbableDescendant([])).toBeUndefined();
   });
 });
+
+describe("getExplicitTabOrder", () => {
+  it("reads valid explicit values, including 0", () => {
+    const widget = createWidget(document.body, { top: 10, left: 10 });
+
+    widget.setAttribute(TAB_ORDER_ATTRIBUTE, "0");
+    expect(getExplicitTabOrder(widget)).toBe(0);
+
+    widget.setAttribute(TAB_ORDER_ATTRIBUTE, "3");
+    expect(getExplicitTabOrder(widget)).toBe(3);
+  });
+
+  it("treats missing, blank and invalid values as Auto", () => {
+    const widget = createWidget(document.body, { top: 10, left: 10 });
+
+    expect(getExplicitTabOrder(widget)).toBeUndefined();
+
+    for (const value of ["", "  ", "-1", "1.5", "abc", "NaN", "Infinity"]) {
+      widget.setAttribute(TAB_ORDER_ATTRIBUTE, value);
+      expect(getExplicitTabOrder(widget)).toBeUndefined();
+    }
+  });
+});
+
+describe("sortTabbableWidgets", () => {
+  const origin = { top: 0, left: 0 };
+
+  it("preserves the current position-based order when all widgets are Auto", () => {
+    const w1 = createWidget(document.body, { top: 10, left: 10 });
+    const w2 = createWidget(document.body, { top: 10, left: 200 });
+    const w3 = createWidget(document.body, { top: 100, left: 10 });
+
+    const result = sortTabbableWidgets(origin, [w1, w2, w3]);
+
+    expect(result).toEqual(sortWidgetsByPosition(origin, [w1, w2, w3]));
+    expect(result).toEqual([w1, w2, w3]);
+  });
+
+  it("treats blank attribute values as Auto and keeps position order", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "   ",
+      },
+    );
+
+    expect(sortTabbableWidgets(origin, [w1, w2])).toEqual(
+      sortWidgetsByPosition(origin, [w1, w2]),
+    );
+  });
+
+  it("ignores invalid values and keeps position order when no valid value exists", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "abc",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "-1",
+      },
+    );
+    const w3 = createWidget(
+      document.body,
+      { top: 100, left: 10 },
+      {
+        tabOrder: "1.5",
+      },
+    );
+
+    expect(sortTabbableWidgets(origin, [w1, w2, w3])).toEqual(
+      sortWidgetsByPosition(origin, [w1, w2, w3]),
+    );
+  });
+
+  it("sorts explicitly ordered widgets first, 0 before 1, before Auto widgets", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "0",
+      },
+    );
+    const w3 = createWidget(document.body, { top: 100, left: 10 });
+
+    expect(sortTabbableWidgets(origin, [w1, w2, w3])).toEqual([w2, w1, w3]);
+  });
+
+  it("treats invalid values as Auto when at least one valid value exists", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "abc",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 100, left: 10 },
+      {
+        tabOrder: "0",
+      },
+    );
+    const w3 = createWidget(
+      document.body,
+      { top: 50, left: 10 },
+      {
+        tabOrder: "-2",
+      },
+    );
+
+    // invalid widgets keep their automatic position order after the explicit one
+    expect(sortTabbableWidgets(origin, [w1, w2, w3])).toEqual([w2, w1, w3]);
+  });
+
+  it("tie-breaks duplicate explicit values using position order", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const w3 = createWidget(
+      document.body,
+      { top: 100, left: 10 },
+      {
+        tabOrder: "0",
+      },
+    );
+
+    expect(sortTabbableWidgets(origin, [w1, w2, w3])).toEqual([w3, w1, w2]);
+  });
+
+  it("reverses the same final sequence for Shift+Tab", () => {
+    const w1 = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "0",
+      },
+    );
+    const w3 = createWidget(document.body, { top: 100, left: 10 });
+
+    expect(sortTabbableWidgets(origin, [w1, w2, w3], true)).toEqual([
+      w3,
+      w1,
+      w2,
+    ]);
+  });
+
+  it("returns the widgets after the current widget in the sequence", () => {
+    const current = createWidget(
+      document.body,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "0",
+      },
+    );
+    const w2 = createWidget(
+      document.body,
+      { top: 10, left: 200 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const w3 = createWidget(document.body, { top: 100, left: 10 });
+
+    expect(sortTabbableWidgets(origin, [w2, w3], false, current)).toEqual([
+      w2,
+      w3,
+    ]);
+    expect(sortTabbableWidgets(origin, [w2, w3], true, current)).toEqual([]);
+  });
+});
+
+describe("getTabbableDescendants: sibling scope", () => {
+  it("keeps the current position-based behavior when all widgets are Auto", () => {
+    const canvas = createCanvas();
+    const w1 = createWidget(canvas, { top: 10, left: 10 });
+    const w2 = createWidget(canvas, { top: 10, left: 200 });
+    const w3 = createWidget(canvas, { top: 100, left: 10 });
+
+    expect(getTabbableDescendants(inputOf(w1))).toEqual([w2, w3]);
+    expect(getTabbableDescendants(inputOf(w3), true)).toEqual([w2, w1]);
+  });
+
+  it("explicit order overrides position order", () => {
+    const canvas = createCanvas();
+    const w1 = createWidget(canvas, { top: 10, left: 10 }, { tabOrder: "1" });
+    const w2 = createWidget(canvas, { top: 10, left: 200 }, { tabOrder: "0" });
+    const w3 = createWidget(canvas, { top: 100, left: 10 });
+
+    // final sequence is [w2, w1, w3]
+    expect(getTabbableDescendants(inputOf(w2))).toEqual([w1, w3]);
+    expect(getTabbableDescendants(inputOf(w1))).toEqual([w3]);
+  });
+
+  it("an explicitly ordered widget above/left of the current one can be next", () => {
+    const canvas = createCanvas();
+    const current = createWidget(
+      canvas,
+      { top: 200, left: 10 },
+      {
+        tabOrder: "0",
+      },
+    );
+    const above = createWidget(
+      canvas,
+      { top: 10, left: 10 },
+      {
+        tabOrder: "1",
+      },
+    );
+
+    expect(getTabbableDescendants(inputOf(current))).toEqual([above]);
+  });
+
+  it("reverses the same sequence for Shift+Tab", () => {
+    const canvas = createCanvas();
+    const w1 = createWidget(canvas, { top: 10, left: 10 }, { tabOrder: "1" });
+    const w2 = createWidget(canvas, { top: 10, left: 200 }, { tabOrder: "0" });
+    const w3 = createWidget(canvas, { top: 100, left: 10 });
+
+    // final sequence is [w2, w1, w3]
+    expect(getTabbableDescendants(inputOf(w3), true)).toEqual([w1, w2]);
+  });
+});
+
+describe("getTabbableDescendants: canvas scope", () => {
+  it("returns the full explicit sequence when tabbing from the canvas", () => {
+    const canvas = createCanvas();
+    const w1 = createWidget(canvas, { top: 10, left: 10 }, { tabOrder: "1" });
+    const w2 = createWidget(canvas, { top: 10, left: 200 }, { tabOrder: "0" });
+    const w3 = createWidget(canvas, { top: 100, left: 10 });
+
+    expect(getTabbableDescendants(canvas)).toEqual([w2, w1, w3]);
+    expect(getTabbableDescendants(canvas, true)).toEqual([w3, w1, w2]);
+  });
+
+  it("keeps the position-based order from the canvas when all widgets are Auto", () => {
+    const canvas = createCanvas();
+    const w1 = createWidget(canvas, { top: 10, left: 10 });
+    const w2 = createWidget(canvas, { top: 10, left: 200 });
+    const w3 = createWidget(canvas, { top: 100, left: 10 });
+
+    expect(getTabbableDescendants(canvas)).toEqual([w1, w2, w3]);
+  });
+});
+
+describe("getTabbableDescendants: modal scope", () => {
+  function createModal() {
+    const modal = document.createElement("div");
+
+    modal.className = "t--modal-widget";
+    mockRect(modal, { top: 0, left: 0, width: 600, height: 600 });
+    document.body.appendChild(modal);
+
+    const trigger = document.createElement("div");
+
+    modal.appendChild(trigger);
+
+    return { modal, trigger };
+  }
+
+  it("keeps the position-based order when all modal widgets are Auto", () => {
+    const { trigger } = createModal();
+    const m1 = createWidget(trigger.parentElement as HTMLElement, {
+      top: 10,
+      left: 10,
+    });
+    const m2 = createWidget(trigger.parentElement as HTMLElement, {
+      top: 110,
+      left: 10,
+    });
+
+    expect(getTabbableDescendants(trigger)).toEqual([m1, m2]);
+    expect(getTabbableDescendants(trigger, true)).toEqual([m2, m1]);
+  });
+
+  it("uses the explicit sequence inside the modal scope", () => {
+    const { modal, trigger } = createModal();
+    const m1 = createWidget(modal, { top: 10, left: 10 });
+    const m2 = createWidget(modal, { top: 110, left: 10 }, { tabOrder: "0" });
+
+    expect(getTabbableDescendants(trigger)).toEqual([m2, m1]);
+    expect(getTabbableDescendants(trigger, true)).toEqual([m1, m2]);
+  });
+});
+
+describe("getTabbableDescendants: nested container scope", () => {
+  it("applies the explicit order only within the inner scope", () => {
+    const outerCanvas = createCanvas();
+    const container = createWidget(
+      outerCanvas,
+      { top: 10, left: 10, width: 500, height: 500 },
+      { widgetClass: "t--widget-containerwidget", withInput: false },
+    );
+    const innerCanvas = createCanvas(container, {
+      top: 10,
+      left: 10,
+      width: 480,
+      height: 480,
+    });
+    const in1 = createWidget(innerCanvas, { top: 20, left: 20 });
+    const in2 = createWidget(
+      innerCanvas,
+      { top: 120, left: 20 },
+      {
+        tabOrder: "1",
+      },
+    );
+    const in3 = createWidget(
+      innerCanvas,
+      { top: 220, left: 20 },
+      {
+        tabOrder: "0",
+      },
+    );
+
+    // inner sequence is [in3, in2, in1]
+    expect(getTabbableDescendants(inputOf(in2))).toEqual([in1]);
+    expect(getTabbableDescendants(inputOf(in2), true)).toEqual([in3]);
+  });
+});
+
+describe("getNextTabbableDescendant: container entry", () => {
+  it("enters a container at the lowest explicit tab order", () => {
+    const canvas = createCanvas();
+    const container = createWidget(
+      canvas,
+      { top: 10, left: 10, width: 500, height: 500 },
+      { widgetClass: "t--widget-containerwidget", withInput: false },
+    );
+    const innerCanvas = createCanvas(container, {
+      top: 10,
+      left: 10,
+      width: 480,
+      height: 480,
+    });
+    const in1 = createWidget(innerCanvas, { top: 20, left: 20 });
+    const in2 = createWidget(
+      innerCanvas,
+      { top: 120, left: 20 },
+      {
+        tabOrder: "0",
+      },
+    );
+
+    expect(getNextTabbableDescendant([container])).toBe(in2);
+    expect(getNextTabbableDescendant([container], true)).toBe(in1);
+  });
+
+  it("enters a container by position when all children are Auto", () => {
+    const canvas = createCanvas();
+    const container = createWidget(
+      canvas,
+      { top: 10, left: 10, width: 500, height: 500 },
+      { widgetClass: "t--widget-containerwidget", withInput: false },
+    );
+    const innerCanvas = createCanvas(container, {
+      top: 10,
+      left: 10,
+      width: 480,
+      height: 480,
+    });
+    const in1 = createWidget(innerCanvas, { top: 20, left: 20 });
+
+    createWidget(innerCanvas, { top: 120, left: 20 });
+
+    expect(getNextTabbableDescendant([container])).toBe(in1);
+  });
+});
+
+// ponytail: handleTab itself isn't tested here — it ends in
+// getFocussableElementOfWidget, which calls node.matches(FOCUS_SELECTOR), and
+// that :is(...[tabindex='-1']) selector is unparseable by jsdom/nwsapi. The
+// new ordering logic is fully covered via getTabbableDescendants below;
+// handleTab is unchanged legacy plumbing.
+
+// Regression guard for the end-to-end seam: with three widgets whose explicit
+// tab order disagrees with their visual position, the tab sequence must follow
+// tabOrder, not position. Two widgets cannot catch this — a 2-cycle ping-pongs
+// the same either way — so the discriminating case needs three. Mirrors the
+// behavior verified live on a deployed app: orders 1 -> 2 -> 3 mapped onto
+// top/mid/bottom widgets, the keyboard sequence walked top -> bottom -> mid.
+describe("getTabbableDescendants: explicit order overrides position (3 widgets)", () => {
+  it("walks tabOrder, not visual position, forward and in reverse", () => {
+    const canvas = createCanvas();
+    // visual order top -> bottom: top, mid, bottom
+    // explicit tab order:          top=1, mid=3, bottom=2
+    // => full sequence is top -> bottom -> mid
+    const top = createWidget(canvas, { top: 10, left: 10 }, { tabOrder: "1" });
+    const mid = createWidget(canvas, { top: 110, left: 10 }, { tabOrder: "3" });
+    const bottom = createWidget(
+      canvas,
+      { top: 210, left: 10 },
+      { tabOrder: "2" },
+    );
+
+    // from top (order 1): next is bottom (order 2) — NOT mid, the next by position
+    expect(getTabbableDescendants(inputOf(top))).toEqual([bottom, mid]);
+    // from bottom (order 2): next is mid (order 3)
+    expect(getTabbableDescendants(inputOf(bottom))).toEqual([mid]);
+    // Shift+Tab from mid (last): predecessors in reverse — bottom, then top
+    expect(getTabbableDescendants(inputOf(mid), true)).toEqual([bottom, top]);
+  });
+});
diff --git a/app/client/src/utils/hooks/useWidgetFocus/tabbable.ts b/app/client/src/utils/hooks/useWidgetFocus/tabbable.ts
index 97c3a5ab8906..ca9367f22840 100644
--- a/app/client/src/utils/hooks/useWidgetFocus/tabbable.ts
+++ b/app/client/src/utils/hooks/useWidgetFocus/tabbable.ts
@@ -1,3 +1,5 @@
+import { sanitizeTabOrder, TAB_ORDER_ATTRIBUTE } from "utils/widgetTabOrder";
+
 export const CANVAS_WIDGET = '[type="CANVAS_WIDGET"]';
 // NOTE: This is a hack to exclude the current canvas from the query selector
 // because when we use.closest, it returns the current element too
@@ -41,7 +43,7 @@ export function getTabbableDescendants(
 
       const domRect = modal.getBoundingClientRect();
 
-      const sortedTabbableDescendants = sortWidgetsByPosition(
+      const sortedTabbableDescendants = sortTabbableWidgets(
         {
           top: shiftKey ? domRect.bottom : domRect.top,
           left: shiftKey ? domRect.right : domRect.left,
@@ -61,7 +63,7 @@ export function getTabbableDescendants(
 
       const domRect = currentNode.getBoundingClientRect();
 
-      const sortedTabbableDescendants = sortWidgetsByPosition(
+      const sortedTabbableDescendants = sortTabbableWidgets(
         {
           top: shiftKey ? domRect.bottom : domRect.top,
           left: shiftKey ? domRect.right : domRect.left,
@@ -77,13 +79,14 @@ export function getTabbableDescendants(
   const siblings = getWidgetSiblingsOfNode(activeWidget);
   const domRect = activeWidget.getBoundingClientRect();
 
-  const sortedSiblings = sortWidgetsByPosition(
+  const sortedSiblings = sortTabbableWidgets(
     {
       top: domRect.top,
       left: domRect.left,
     },
     siblings,
     shiftKey,
+    activeWidget,
   );
 
   if (sortedSiblings.length) return sortedSiblings;
@@ -127,7 +130,7 @@ export function getNextTabbableDescendant(
     const { bottom, left, right, top } =
       nextTabbableDescendant.getBoundingClientRect();
 
-    const sortedTabbableDescendants = sortWidgetsByPosition(
+    const sortedTabbableDescendants = sortTabbableWidgets(
       {
         top: shiftKey ? bottom : top,
         left: shiftKey ? right : left,
@@ -202,6 +205,113 @@ function getWidgetSiblingsOfNode(node: HTMLElement) {
   return siblings.filter((sibling) => sibling !== widget);
 }
 
+/**
+ * reads the sanitized explicit tab order of a widget element from the
+ * data attribute rendered by the widget wrapper. Absent or invalid values
+ * mean automatic order.
+ *
+ * @param element
+ * @returns
+ */
+export function getExplicitTabOrder(element: HTMLElement): number | undefined {
+  const value = element.getAttribute(TAB_ORDER_ATTRIBUTE);
+
+  return value === null ? undefined : sanitizeTabOrder(value);
+}
+
+/**
+ * sorts the widgets of the current tab scope
+ *
+ * When no widget in the scope has a valid explicit tabOrder, this defers to
+ * sortWidgetsByPosition, preserving the automatic position-based behavior
+ * exactly. When at least one widget has a valid tabOrder, the scope sequence
+ * becomes: explicitly ordered widgets ascending (ties broken by position),
+ * followed by the remaining widgets in automatic position order. Shift+Tab
+ * walks the same sequence in reverse.
+ *
+ * @param boundingClientRect top/left of the element we are tabbing from
+ * @param tabbableDescendants candidate widgets of the current scope
+ * @param shiftKey
+ * @param currentWidget the widget we are tabbing from, when it is part of the scope
+ * @returns
+ */
+export function sortTabbableWidgets(
+  boundingClientRect: {
+    top: number;
+    left: number;
+  },
+  tabbableDescendants: HTMLElement[],
+  shiftKey = false,
+  currentWidget?: HTMLElement | null,
+): HTMLElement[] {
+  const scope = currentWidget
+    ? [...tabbableDescendants, currentWidget]
+    : tabbableDescendants;
+  const hasExplicitTabOrder = scope.some(
+    (widget) => getExplicitTabOrder(widget) !== undefined,
+  );
+
+  if (!hasExplicitTabOrder) {
+    return sortWidgetsByPosition(
+      boundingClientRect,
+      tabbableDescendants,
+      shiftKey,
+    );
+  }
+
+  const sequence = getTabOrderSequence(scope);
+
+  if (currentWidget) {
+    const currentIndex = sequence.indexOf(currentWidget);
+
+    return shiftKey
+      ? sequence.slice(0, currentIndex).reverse()
+      : sequence.slice(currentIndex + 1);
+  }
+
+  return shiftKey ? [...sequence].reverse() : sequence;
+}
+
+/**
+ * builds the full tab sequence of a scope: widgets with a valid explicit
+ * tabOrder first (ascending, duplicates tie-break by position), then the
+ * remaining widgets in automatic position order
+ *
+ * @param widgets
+ * @returns
+ */
+function getTabOrderSequence(widgets: HTMLElement[]): HTMLElement[] {
+  const byPosition = [...widgets].sort((a, b) => {
+    const rectA = a.getBoundingClientRect();
+    const rectB = b.getBoundingClientRect();
+
+    return rectA.top - rectB.top || rectA.left - rectB.left;
+  });
+
+  const explicit: {
+    element: HTMLElement;
+    order: number;
+    positionIndex: number;
+  }[] = [];
+  const auto: HTMLElement[] = [];
+
+  byPosition.forEach((element, positionIndex) => {
+    const order = getExplicitTabOrder(element);
+
+    if (order === undefined) {
+      auto.push(element);
+    } else {
+      explicit.push({ element, order, positionIndex });
+    }
+  });
+
+  explicit.sort(
+    (a, b) => a.order - b.order || a.positionIndex - b.positionIndex,
+  );
+
+  return [...explicit.map((entry) => entry.element), ...auto];
+}
+
 /**
  * sorts the descendants by their position in the DOM
  *
diff --git a/app/client/src/utils/widgetTabOrder.test.ts b/app/client/src/utils/widgetTabOrder.test.ts
new file mode 100644
index 000000000000..694f1d639a3b
--- /dev/null
+++ b/app/client/src/utils/widgetTabOrder.test.ts
@@ -0,0 +1,48 @@
+import { sanitizeTabOrder } from "./widgetTabOrder";
+
+describe("sanitizeTabOrder", () => {
+  it("accepts non-negative integers, including 0", () => {
+    expect(sanitizeTabOrder(0)).toBe(0);
+    expect(sanitizeTabOrder(1)).toBe(1);
+    expect(sanitizeTabOrder(42)).toBe(42);
+  });
+
+  it("accepts numeric strings, including '0'", () => {
+    expect(sanitizeTabOrder("0")).toBe(0);
+    expect(sanitizeTabOrder("3")).toBe(3);
+    expect(sanitizeTabOrder("10")).toBe(10);
+  });
+
+  it("treats null, undefined and blank values as Auto", () => {
+    expect(sanitizeTabOrder(null)).toBeUndefined();
+    expect(sanitizeTabOrder(undefined)).toBeUndefined();
+    expect(sanitizeTabOrder("")).toBeUndefined();
+    expect(sanitizeTabOrder("   ")).toBeUndefined();
+  });
+
+  it("rejects negative numbers", () => {
+    expect(sanitizeTabOrder(-1)).toBeUndefined();
+    expect(sanitizeTabOrder("-1")).toBeUndefined();
+  });
+
+  it("rejects decimals", () => {
+    expect(sanitizeTabOrder(1.5)).toBeUndefined();
+    expect(sanitizeTabOrder("1.5")).toBeUndefined();
+  });
+
+  it("rejects NaN and Infinity", () => {
+    expect(sanitizeTabOrder(NaN)).toBeUndefined();
+    expect(sanitizeTabOrder("NaN")).toBeUndefined();
+    expect(sanitizeTabOrder(Infinity)).toBeUndefined();
+    expect(sanitizeTabOrder("Infinity")).toBeUndefined();
+    expect(sanitizeTabOrder(-Infinity)).toBeUndefined();
+  });
+
+  it("rejects non-numeric strings and non string/number types", () => {
+    expect(sanitizeTabOrder("abc")).toBeUndefined();
+    expect(sanitizeTabOrder("12abc")).toBeUndefined();
+    expect(sanitizeTabOrder(true)).toBeUndefined();
+    expect(sanitizeTabOrder({})).toBeUndefined();
+    expect(sanitizeTabOrder([])).toBeUndefined();
+  });
+});
diff --git a/app/client/src/utils/widgetTabOrder.ts b/app/client/src/utils/widgetTabOrder.ts
new file mode 100644
index 000000000000..4d223b52142e
--- /dev/null
+++ b/app/client/src/utils/widgetTabOrder.ts
@@ -0,0 +1,38 @@
+/**
+ * Shared helpers for the platform-level `tabOrder` widget property.
+ *
+ * A valid explicit tab order is a non-negative integer (0 is valid and means
+ * the earliest explicit order). Anything else — null, undefined, blank,
+ * negative numbers, decimals, NaN, Infinity, non-numeric strings — means
+ * "Auto" and must be ignored at runtime.
+ */
+
+/**
+ * DOM attribute used to propagate a sanitized explicit tab order from a
+ * widget wrapper to the custom tabbing logic in useWidgetFocus. The attribute
+ * is only rendered for valid explicit values.
+ */
+export const TAB_ORDER_ATTRIBUTE = "data-tab-order";
+
+/**
+ * Returns the explicit tab order as a non-negative integer, or undefined
+ * when the value is absent or invalid (i.e. the widget uses automatic order).
+ */
+export function sanitizeTabOrder(value: unknown): number | undefined {
+  let parsed: number;
+
+  if (typeof value === "number") {
+    parsed = value;
+  } else if (typeof value === "string") {
+    if (value.trim() === "") return undefined;
+
+    parsed = Number(value);
+  } else {
+    return undefined;
+  }
+
+  // Number.isInteger is false for NaN, Infinity and decimals
+  if (!Number.isInteger(parsed) || parsed < 0) return undefined;
+
+  return parsed;
+}